appendChild()、insertBefore()是移動element節點！

標籤：

原文地址

appendChild()、insertBefore()是移動element節點，看書的時候注意過，也可以做一個簡單的例子測試一下：

<div id="div1">    <p id="p1" style="background-color:blue">2014</p></div><hr /><div id="div2"></div>var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");var p1 = document.getElementById("p1");div2.appendChild(p1);

以上代碼中，P本來是在div1中，hr的上面，執行了appendChild()之後，就移動到了div2中，hr下面了：

 

但是今天我在一個實際工作中，卻忽略了這一問題。代碼過程如下：

1. 用js建立一個5000 * 100的table，儲存到一個臨時的div中；

2. 取出這個table的前100行，載入到頁面上的一個table中；

代碼如下：

 1 <table id="tableContent" cellpadding="0" cellspacing="0"></table> 2  3 var tableContent = document.getElementById("tableContent"); 4  5 var trNum = 5000, 6       tdNum = 100, 7       html = "", 8       tempDiv = document.createElement("div"); 9 10 //建立 5000 * 100 的table，並放在臨時div中11 html += "<table>";12 for (i = 0; i < trNum; i++) {13                 html += "<tr>";14 15                 for (j = 0; j < tdNum; j++) {16                     html += "<td>" + i + "|" + j + "</td>";17                 }18 19                 html += "</tr>";20 }21 html += "</table>";22 tempDiv.innerHTML = html;23 24 //取出前100行，載入到tableContent 上25 var trs = tempDiv.firstChild.firstChild.childNodes,26       trLen = trs.length;27       tempTbody = document.createElement("tbody");28 29 for (i = 0; i < 100 && i < trLen; i++) {30     tempTbody.appendChild(trs[i]);                         //出問題的地方！31 }32 33 tableContent.appendChild(tempTbody);

問題的原因：

建立一個table，儲存到臨時的div中。然後再取出這個div，找到table的所有行tr，儲存到trs中。

然後迴圈trs集合，取出前100個，添加到臨時的tbody上，問題就出現在這裡。

for (i = 0; i < 100 && i < trLen; i++) {     tempTbody.appendChild(trs[i]);                         }

當我每執行一次tempTbody.appendChild(trs[i])的時候，其實都是從trs中移除一個元素，trs的長度會越來越小，因此得不到我想要的結果。

要解決這一問題，很簡單，只需加上.cloneNode(true)即可。

for (i = 0; i < 100 && i < trLen; i++) {     tempTbody.appendChild(trs[i].cloneNode(true));                         }

 

這種雞毛蒜皮的問題，有時候還是需要多注意，多積累。且行且珍惜，且寫且注意啊！

（轉）appendChild()、insertBefore()是移動element節點！