(转)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 { ...
随机推荐
- JS中关于clientWidth offsetWidth scrollWidth 等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- [字符哈希] POJ 3094 Quicksum
Quicksum Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16488 Accepted: 11453 Descri ...
- C# 4.0 新特性dynamic (待学习)
随便翻看了一下dynamic,在网上拷贝了一个例子,先贴出来等有空了再慢慢消化 static void Main(string[] args) { dynamic d = new MyDynamicO ...
- EntityFrame Work:No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient'
今天试着学习了Entity Frame Work遇到的问题是 The Entity Framework provider type 'System.Data.Entity.SqlServer.SqlP ...
- wxPython入门练习代码 三
DoubleEventFrame.py: #!/usr/bin/env/ python import wx class DoubleEventFrame(wx.Frame): def __init__ ...
- 1476. Lunar Code
http://acm.timus.ru/problem.aspx?space=1&num=1476 由于前一列对后一列有影响,所以需要保持前一列的状态, 但无需用状态压缩来保存(也保存不了) ...
- sh back mongo
!/bin/shBACK_DB=ALLOUT_DIR=/home/jianyeruan/app/mongo #临时备份目录TAR_DIR=/home/jianyeruan/app/mongotar # ...
- NSOperation的start与main,并发与非并发。
http://blog.csdn.net/a2331046/article/details/52294006 在ios4以前,只有非并发的情况下,队列会为operation开启一个线程来执行.如果是并 ...
- POJ 3294 二分找超过一半字符串中存在的子串
题目大意: 给定n个字符串,求出现在不小于k/2个字符串中的最长子串. 二分找对应子串长度的答案,将所有字符串链接成一个长字符串求后缀数组,记录每一个位置本属于第几个字符串,利用height查询的时候 ...
- Web开发中最致命的8个小错误
错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:logo图片没有链接到主页 点击 ...