(转)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));
}
这种鸡毛蒜皮的问题,有时候还是需要多注意,多积累。且行且珍惜,且写且注意啊!
(转)appendChild()、insertBefore()是移动element节点!的更多相关文章
- js便签笔记(3)——切记:appendChild()、insertBefore()是移动element节点!
appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"> & ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
- (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点
Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...
- Element节点
Element节点对象对应网页的 HTML 元素.每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1.Element ...
- 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用
这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...
- Element节点输出到System.out
protected void writeElementToFile(Element valrespEle) { try { TransformerFactory transformerFactory ...
- 在Element节点上进行Xpath
XPathFactory xPathFactory = XPathFactory.newInstance(); XPath xpath = xPathFactory.newXPath(); try { ...
随机推荐
- 在update时用触发器插入数据
CREATE trigger [dbo].[Debt_Insert] on [dbo].[Debt] for insert as declare @tmpOrderID1 varchar(30)sel ...
- 关于不断刷新界面jsp+ajax
jsp主要就是用之前的jsonArray读取 ajax可以设置个定时器,然后设置的方法,至于方法是今天学习到的 function ajax(method,data,url,success){ var ...
- ASCII、UNICODE、UTF-8等关系
参考如下: 网址1:http://blog.csdn.net/lx697/article/details/5914417 网址2:http://www.php100.com/html/it/bianc ...
- 根据序列图像聚焦区域获取深度 Shape From Focus
最为超新新新新鸟...我也不知道第一篇文章应该写什么..所以,把自己最近正在研究的东西报一下吧, 研究的东西其实也不算深奥,就是对一个图像序列中的每张图像进行检测,发现每张图片的聚焦清晰区域,找到这个 ...
- linux环境下安装oracle数据库 原文在卡卡100http://www.cnblogs.com/kaka100
centos55_oracle11gr2_install 第一个阶段:安装centos55 a:安装centos5.5 用图形界面安装 硬盘 16G 注意:用图形界面安装.. 第二个阶段:配 ...
- 杭电1597--find the nth digit--假设:S1 = 1,S1=12,S3=123,S4=1234...
我是把它分层来求的,也就是说第一层是1,第二层是12,第三层是123......你们该懂的!! #include <iostream>#include <cmath>using ...
- 使用php-cs-fixer格式化你的代码
在开发中,我们会有意识的遵行一套规范来保证团队代码的一致性.PSR是我们PHP遵循的共同规范. 在这里,推荐一个代码格式化工具php-cs-fixer,可以一键把代码格式化为PSR-2的标准. 安装: ...
- Jmeter性能测试入门(转)
出处:http://www.cnblogs.com/by-dream/p/5611555.html Jmeter性能测试步骤 1. 添加线程组之后,先设置这两项: 2. 添加一个http请求 被测的u ...
- asp.net mvc 防止开放重定向
/// <summary> /// 防止开发重定向,篡改returnurl /// </summary> /// <param name="request&qu ...
- 字母序列递增,即A+1=B,B+2=D,ASCII
实际遇到的问题是 单号15001订单的15001-A自动生成15001-B,15001-C.... //说明:以15001-A为基准生成15001-B string maxno ="1500 ...