js便签笔记（3）——切记：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));
}

这种鸡毛蒜皮的问题，有时候还是需要多注意，多积累。且行且珍惜，且写且注意啊！

转载于:https://www.cnblogs.com/wangfupeng1988/p/3639248.html

js便签笔记（3）——切记：appendChild()、insertBefore()是移动element节点！相关推荐

js便签笔记（9）——解读jquery源码时记录的一些知识点
近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...
便签 java_基于安卓Android的便签笔记APP设计(Android studio)
基于安卓Android的便签笔记APP设计(Android studio)(论文9000字,程序代码) 摘要:本文介绍了便签的发展史.基础操作流程以及便签的具体功能,提出了基于Android的便签AP ...
用现成的脚本，终于把锤子便签笔记批量导出了
锤子笔记是一款功能强大的笔记应用,以前我用锤子便签主要是轻度使用场景,做一些小记,并且它可以多端同步( Android iOS web ),小巧.内容支持图片.标签内容打开即提取.复制粘贴方便.APP ...
锤子科技锤子便签APP产品使用用户体验报告
参考博客资料链接https://www.cnblogs.com/wuqi/p/4779907.html. http://www.woshipm.com/pd/185729.html 曾经使用过很多便签 ...
CSS3+JS 实现的便签应用
概述利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...
vivo自带便签新版_vivo手机笔记在哪里及如何用vivo手机做笔记？
相信很多年轻人在工作中累了的时候,都会通过听音乐的方式来放松自己,vivo手机在这个方面可以算上优秀了,它较高的音质让很多人对它爱不释手.其实除了这个优点之外,更让大家喜欢它的原因就是它不但能够让用户 ...
印象笔记打开错误_只会用手机自带便签？这三款笔记软件分分钟秒杀
原创文 | 文艺旁·点击上方收听音频正文共:2555字 16图预计阅读时间:7分钟手机自带便签的唯一优点在于打开迅速,但整理大量文件,多设备同步就非常不方便了. 第三方笔记软件优点: 多级 ...
有方便记笔记的手机便签app吗？
作为一名普通的上班族,我每天都过得很充实.不仅要处理多项工作任务,还需要认真工作总结工作经验,整理工作资料.所以,为了方便日常的记录和后续的查看,我开始使用手机便签app整理工作笔记.因为,相较于传统 ...
js：插入节点appendChild insertBefore使用方法
首先从定义来理解这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法: ...

js便签笔记（3）——切记：appendChild()、insertBefore()是移动element节点！

js便签笔记（3）——切记：appendChild()、insertBefore()是移动element节点！相关推荐

最新文章

热门文章