标签:
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