JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)
操作节点
Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：
Node类型原型方法说明：
| 方法 | 说明 |
|---|---|
| appendChild() | 向节点的子节点列表的结尾添加新的子节点 |
| cloneNode() | 复制节点 |
| hasChildNodes() | 判断当前节点是否拥有子节点 |
| insertBefore() | 在指定的子节点前插入新的子节点 |
| normalize() | 合并相邻的Text节点并删除空的Text节点 |
| removeChild() | 删除（并返回）当前节点的指定子节点 |
| replaceChild() | 用新节点替换一个子节点 |
其中，appendChild()、insertBefore()、removeChild()、replaceChild()方法用于对子节点进行添加、删除和复制操作。要使用这几个方法必须先取得父节点，可以使用parentNode属性。另外，并不是所有类型的节点都又子节点，如果不支持子节点的节点上调用了这些方法将会导致错误发生。
插入节点
appendChild():
appendChild(newchild)//newchild表示新添加的节点对象，并返回新增的节点
示例：将段落文本增加到指定的div元素中，使它成为当前节点的最后一个子节点
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div><script>var p = document.createElement("p"); //创建段落节点var txt = document.createTextNode("盒子模型"); //创建文本节点p.appendChild(txt); //把文本节点增加到段落节点中document.getElementById("box").appendChild(p);//添加到div</script></body>
</html>
如果文档树种已经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加的节点是DocumentFragment节点，则不会直接插入，而是把它的子节点按顺序插入当前节点的末尾。
将元素添加到文档中，浏览器会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反应在浏览器中。
示例：新建两个盒子和一个按钮，点击按钮执行插入操作
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{ margin:lem;}#red {border:solid 1px red;}#blue {border:solid 1px blue;}</style></head><body><div id="red"><h1>红盒子</h1></div><div id="blue">蓝盒子</div><button id="ok">移动</button><script>var ok = document.getElementById("ok");ok.onclick = function(){var red = document.getElementById("red");var blue = document.getElementById("blue");blue.appendChild(red);}</script></body>
</html>
insertBefore()：
insertBefore(newChild, refchild)//newchild表示插入新的节点，refchild表示在此节点前插入新的节点，返回新的子节点
示例：依然使用上一个示例，如果把蓝盒子移动到红盒子所包含的< h1 >标题元素前面，使用appendChild()是无法实现的，此时应该使用insertBefore()
<script>var ok = document.getElementById("ok");ok.onclick = function(){var red = document.getElementById("red");var blue = document.getElementById("blue");var h1 = document.getElementsByTagName("h1")[0];red.insertBefore(blue, h1);}
</script>
注意：insertBefore()方法与appendChild()方法一样，可以把指定元素及其所包含的所有子元素都一起插入到指定位置中。同时会先删除移动的元素，然后再重新插入到新的位置。
删除节点：remoceChild()
nodeObject.removeChild(node)//node为要删除的节点，如果删除成功，返回被删除的节点；失败则返回null
注意：当使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除。
示例：单击按钮，删除红盒子中的< h1 > 标题
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{ margin:lem;}#red {border:solid 1px red;}#blue {border:solid 1px blue;}</style></head><body><div id="red"><h1>红盒子</h1></div><div id="blue">蓝盒子</div><button id="ok">移动</button><script>var ok = document.getElementById("ok");ok.onclick = function(){var red = document.getElementById("red");var h1 = document.getElementsByTagName("h1")[0];red.removeChild(h1);}</script></body>
</html>
封装一个删除指定节点下所有子节点的函数：
function empty(e){//e,要被删除的子节点的父节点while(e.firstChild){e.removeChild(e.firstChild);}
}
替换节点：replaceChild()
nodeObject.replaceChild(new_node, old_node)
//new_node新的节点，old_node被替换的节点
//替换成功返回被替换的节点，失败则返回null
示例：用一个< h2 > 标题替换红盒子中的 < h1 >标题
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{ margin:lem;}#red {border:solid 1px red;}#blue {border:solid 1px blue;}</style></head><body><div id="red"><h1>红盒子</h1></div><div id="blue">蓝盒子</div><button id="ok">替换</button><script>var ok = document.getElementById("ok");ok.onclick = function(){var red = document.getElementById("red");var h1 = document.getElementsByTagName("h1")[0];var h2 = document.createElement("h2");var txt = document.createTextNode("二级标题");h2.appendChild(txt);red.replaceChild(h2, h1);}</script></body>
</html>
如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助replaceChild()方法在文档中使用现有的节点替换另一个存在的节点。
克隆节点
nodeObject.cloneNode(include_all)
//include_all为布尔值，如果为true，那么将克隆原节点，以及所有子节点；为false时，仅复制节点本身
//复制后返回的节点副本属于文档所有，但并没有为它指定父节点，需要通过appendChild()、insertBefore()或replaceChild()方法将它添加到文档中
注意：cloneNode()方法不会复制添加到DOM节点中的Javascript属性，如事件处理程序等。这个方法只复制HTML特性或子节点，其他一切都不会复制。IE在此存在一个bug，即它会复制事件处理程序，所以建议在复制之间最好先移除事件处理程序。
示例：复制一个节点及所有包含的子节点。复制创建的 < h1 >标题，该节点所包含的子节点及文本节点都将复制过来，然后把它增加到body元素的尾部。
var p = document.createElement("p");//创建一个p元素
var h1 = document.createElement("h1");//创建一个h1元素
var txt = document.createTextNode("Hello World");//创建文本节点p.appendChild(txt);
h1.appendChild(p);document.body.appendChild(h1);//把h1添加到body中
var new_h1 = h1.cloneNode(true);
document.body.appendChild(new_h1);
注意：由于复制的节点会包含原节点的所有特性，如果原节点中包含id属性，就会出现id重复的情况。一般情况下，在同一个文档中，不同元素的id属性值应该不同。为了避免潜在冲突，应该修改其中某个节点的id属性值。