js便簽筆記（3）——切記：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));
}
這種雞毛蒜皮的問題，有時候還是需要多注意，多積累。且行且珍惜，且寫且注意啊！
浙公網安備 33010602011771號