appendChild()、insertBefore()是移动element节点！
浏览数：37 /
时间：2015年06月11日
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));
}
这种鸡毛蒜皮的问题，有时候还是需要多注意，多积累。且行且珍惜，且写且注意啊！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
