1.document.createElement()（最常用） 通过指定名称创建一个元素
2.document.createTextNode() 可创建文本节点。
3.element.appendChild() 可向节点的子节点列表的末尾添加新的子节点。
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
如果 newchild 是 DocumentFragment(文档片段节点)节点，则不会直接插入它，
而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
你可以使用 appendChild() 方法移除元素到另外一个元素。
append()
parentNode.append()是还在试用期的方法，有兼容问题。
是在parendNode节点中最后一个子节点后插入新Node或者DOMString（字符串，插入后为Text节点）.
与parentNode.appendChild()的区别在于：
parentNode.append()可以同时传入多个节点或字符串，没有返回值；
而parentNode.appendChild()只能传一个节点，
且不直接支持传字符串(需要parentNode.appendChild(document.createTextNode('字符串'))代替)，
返回追加的Node节点
4.父节点.insertBefore(插入的新节点，原节点) 方法可在已有的子节点前插入一个新的子节点。
提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。
你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。
5.父节点.replaceChild(新节点，老节点) 方法可将某个子节点替换为另一个。
新节点可以是文本中已存在的，或者是你新创建的。
6.父节点.removeChild(element) 方法可从父节点下的子节点列表中删除某个节点。
如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
7.element.remove() 将本身移除掉
JS
var box=document.querySelector("#box");
fgx("1.document.creatElement():");
var ceDiv=document.createElement("div");//通过指定名称创建一个元素
console.log("ceDiv:",ceDiv);
var ceDiv2=document.createElement("div2");//通过指定名称创建一个元素
console.log("ceDiv2:",ceDiv2);
fgx("2.document.creatTextNode():");
var ctText=document.createTextNode("通过js创建的文本节点");//创建文本节点
console.log("ctText:",ctText);
fgx("3.element.appendChild():");
ceDiv.appendChild(ctText);//可向节点的子节点列表的末尾添加新的子节点。
console.log("ceDiv:",ceDiv);
box.appendChild(ceDiv);//可向节点的子节点列表的末尾添加新的子节点。
console.log("box:",box);
fgx("appendChild剪切");
var btn=document.querySelector("#btn");
btn.οnclick=function(){
var newchild=document.querySelector("#newchild");
console.log("newchild:",newchild);
box.appendChild(newchild);
}
fgx("4.element.insertBefore(newnode,existingnode):");
var ceP=document.createElement("p");
ceP.append("通过append可以直接添加string,但有兼容性问题","2");//存在兼容性问题//存在兼容性问题
var br=document.createElement("br");
ceP.appendChild(br);
var ctText2=document.createTextNode("通过createTextNode创建");
ceP.appendChild(ctText2);
var boxDiv=document.querySelector("#box>div:nth-child(1)");
box.insertBefore(ceP,boxDiv);//方法可在已有的子节点前插入一个新的子节点
fgx("insertBefore剪切");
var btn2=document.querySelector("#btn2");
btn2.οnclick=function(){
box.insertBefore(newchild,boxDiv);
}
fgx("5.element.replaceChild(newnode,oldnode):");
var t=setTimeout(function(){
var replaceChildId=document.querySelector("#replaceChildId");
var repDiv=document.createElement("div");
var repText=document.createTextNode("repacleChild替换原来内容");
repDiv.appendChild(repText)
var body=document.querySelector("body");
body.replaceChild(repDiv,replaceChildId);//body是replaceChildId的父节点.
},3000);
fgx("replaceChild剪切");
var btn3=document.querySelector("#btn3");
btn3.οnclick=function(){
box.replaceChild(newchild,boxDiv);
}
fgx("6.element.removeChild(node):");
var btn4=document.querySelector("#btn4");
var btn5=document.querySelector("#btn5");
var removeChildId=document.querySelector("#removeChildId");
btn4.οnclick=function(){
removeChildId.parentNode.removeChild(removeChildId);//通过父元素移除自己
}
fgx("7.remove()");
btn5.οnclick=function(){
removeChildId.remove();//可以移除自己
this.remove();//可以移除自己
}
8.cloneNode() 方法可创建指定的节点的精确拷贝。
var dom=document.querySelector("#cloneNodeId");
var newDom1=dom.cloneNode(true);
var newDom2=dom.cloneNode(false);//默认是false
domDiv1.appendChild(newDom1);
domDiv2.appendChild(newDom2);
//克隆
DOM1.cloneNode(boolean) : 复制一个节点
true：深复制，复制节点及其整个子节点树
false : 浅复制，只复制节点本身。默认是false
cloneNode() 方法 拷贝所有属性和值。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
node.cloneNode(deep)//deep:true/false
var dom=document.querySelector("#cloneNodeId");
var domDiv1=document.querySelector("#cloneDiv1");
var domDiv2=document.querySelector("#cloneDiv2");
var newDom1=dom.cloneNode(true);
var newDom2=dom.cloneNode(false);//默认是false
console.log("newDom1:",newDom1);
console.log("newDom2:",newDom2);
domDiv1.appendChild(newDom1);
domDiv2.appendChild(newDom2);
var btn6=document.querySelector("#btn6");
btn6.οnclick=function(){
alert(this.nodeName);
}