appendChild()插入節點需注意的問題

標籤：

第一點：首先appendChild插入節點時返回的值是插入的節點本身，另外必須要找到所要插入的父節點：

1 var returnNode = parentNode.appendChild(childNode);2 console.log(returnNote===childNode);//true

第二點：appendChild所要插入的新節點如果存在於文檔流中，那麼此時並不會把心節點複製然後插入到這個父節點下，而是把這個新節點從來源文件流中移動到所要插入的父節點下：

 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>

這樣有js代碼和沒有js代碼的表現是一樣的，但是在fireBug下可以清楚地發現有id的div移動到了沒有id的那個div前面去了；也即是id=‘a‘的div只是移動到了父節點下而已。

 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>

解決的方法就是將所要插入的節點clone一下在插入到相應位置，這樣就可以達到預期的效果了

 

appendChild()插入節點需注意的問題