(转)appendChild()、insertBefore()是移动element节点!
2024-10-11 14:03:00
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));
}
这种鸡毛蒜皮的问题,有时候还是需要多注意,多积累。且行且珍惜,且写且注意啊!
最新文章
- xml对象的序列化和反序列化
- SQL Server:字符串函数
- Windows Phone 开发环境的搭建
- ffmpeg-20160520-git-bin
- 5.HBase In Action 第一章-HBase简介(1.1.3 HBase的兴起)
- android开发,关于android app实现静默安装自己(系统签名)
- asp.net 多站点共享StateServer Session
- OpenH264
- USB设备驱动概述
- android studio gradle 更新方法。
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据
- Game HDU - 3389 (博弈论)
- poj1873(枚举+凸包)
- Shell-18--正则表达式
- oadrunner11录制手机app脚本
- sync命令详解
- 卸载linux订阅包
- Android 4 学习(21):对话框
- hadoop单击模式环境搭建
- Java中关于String的比较
热门文章
- CentOS_7.2安装Redis_3.0
- Python:循环语句
- ios基础篇(二十六)—— UITableViewCell的分组索引与标记
- Windows Store App JavaScript 开发:WinJS库控件
- EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(八)
- ajax的探究与使用
- shell 转义字符的写法
- centOS 6.7 中安装matlab R2014b
- CentOS7.1下JDK+Tomcat应用环境搭建
- html5 audio的暂停与播放