appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结

1.appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点。更新节点后，appendChild()返回新增的节点。

下面的parentNode代表父节点，newNode代表新节点，returnedNode代表appendChild返回的节点

var returnedNode = parentNode.appendChild(newNode);
console.log( returnedNode == newNode )  //true
console.log( returnedNode == parent.lastChild)  //true

如果传入到appendChild()中的newNode原本已经是文档的一部分了，结果会将该节点从原来的位置转移到新位置。因为任何DOM节点不能同时出现在文档的多个位置上。

例子如下：parentNode中的firstChild将会转移为lastChild

//假设parentNode有多个子节点
var returnedNode = parentNode.appendChild(parentNode.firstChild);
console.log( returnedNode == parentNode.lastChild )     //true
console.log( returnedNode == parentNode.firstChild )    //false

2.insertBefore()

insertBefore()接受2个参数，要插入的节点和作为参考的节点。。更新节点后，insertBefore()返回新插入的节点。

两个参数都是必填，不过第二个参数可以为null。

如果第二个参数是null，则insertBefore()实现的效果与appendChild()相同。

//插入后成为最后一个节点
var returnedNode = parentNode.insertBefore(newNode,null);
console.log( returnedNode ==  parentNode.lastChild );   //true

//插入后成为第一个节点
var returnedNode = parentNode.insertBefore(newNode,parentNode.firstChild);
console.log( returnedNode ==  parentNode.firstChild );  //true

//插入到最后一个节点前面
var returnedNode = parentNode.insertBefore(newNode,parentNode.lastChild);
console.log( returnedNode ==  parentNode.childNodes[parentNode.childNodes.length-2]);   //true
或者
console.log( returnedNode ==  parentNode.childNodes.item(parentNode.childNodes.length-2));  //true

3.replaceChild()

replaceChild()接受两个参数：要插入的节点和要替换的节点。并返回要替换的节点。

//替换第一个节点
var returnedNode = parentNode.replaceChild(newNode,parentNode.firstChild);

4.removeChild()

removeChild()接受一个参数：要移除的节点。并返回移除的节点。

//移除第一个节点
var returnedNode = parentNode.removeChild(parentNode.firstChild);

5.cloneNode()

cloneNode()为一个节点创建完全相同的副本。接受一个可选的布尔值参数，表示是否执行深复制。

当参数为true，则执行深复制，也就是复制节点及其整个子节点树；当参数为false，执行浅复制，只复制节点本身，不包含它的子节点树。

假设HTML如下：

<ul id='oul'>
    <li>text1</li>
    <li>text2</li>
    <li>text3</li>
</ul>

深复制：

var oul = document.getElementById('oul');

var deepList = oul.cloneNode(true);

console.log(deepList.childNodes.length)     //7 或者 3（IE<9，IE9之前的版本不会为空白符创建节点）

浅复制：

var oul = document.getElementById('oul');

var deepList = oul.cloneNode();

console.log(deepList.childNodes.length)     //0