appendChild() , insertBefore()插入节点需注意的问题

使用appendChild()和insertBefore()插入节点都会返回给插入的节点，

[javascript] view plain copy

1. //由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点  
2. //使用appendChild()方法插入节点  
3. var returnedNode = someNode.appendChild(newNode);  
4. alert(returnedNode == newNode) //true  
5.   
6. //使用insertBefore()方法插入节点  
7. var returnedNode = someNode.appendChild(newNode);  
8. alert(returnedNode == newNode) //true  

 值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。

[javascript] view plain copy

1. <div id="test">  
2.     <div>adscasdjk</div>  
3.         <div id="a">adscasdjk</div>  
4. </div>  
5. <script type="text/javascript">  
6.     var t = document.getElementById("test");  
7.     var a = document.getElementById('a');  
8.     //var tt = a.cloneNode(true);  
9.     t.appendChild(a);  
10. </script>  

在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。

如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

[javascript] view plain copy

1. <div id="test">  
2.     <div>adscasdjk</div>  
3.         <div id="a">adscasdjk</div>  
4. </div>  
5. <script type="text/javascript">  
6.     var t = document.getElementById("test");  
7.     var a = document.getElementById('a');  
8.     var tt = a.cloneNode(true);  
9.     t.appendChild(tt);  
10. </script>  

相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。

顶