码迷,mamicode.com
首页 > 移动开发 > 详细

(转)appendChild()、insertBefore()是移动element节点!

时间:2015-05-19 07:08:57      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

原文地址

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节点!

标签:

原文地址:http://www.cnblogs.com/ptrmem/p/4513489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!