js原生appendChild的bug解决心得分享
更新时间：2013年07月01日 17:00:53 作者：
appendChild主要是用来追加节点插入到最后；循环的时候由于不停的搬家导致length 在改变，改用for的话开始的length已经被固定，问题就解决啦
appendChild 主要是用来追加节点 插入到最后
window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
ul2.appendChild(oli[i]);
}
}
<h3>讲Id为ul1的内容插入到ul2里面</h3>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="ul2">
</ul>
把ul1内容插入到ul2里面，这个其实是搬家而不是复制 这个要切记
可以查看一下效果
为什么会出现这样的效果 是因为 循环的时候 由于不停的搬家 导致length 在改变 如果用for的话 这样开始的length 已经被固定啦 所以出现问题，所以说要改成
while(oli.length){
ul2.appendChild(oli[0]);
}
这样的都是插入第一条 所以就成功啦 大家可以试试
复制代码 代码如下:
window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
ul2.appendChild(oli[i]);
}
}
<h3>讲Id为ul1的内容插入到ul2里面</h3>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="ul2">
</ul>
把ul1内容插入到ul2里面，这个其实是搬家而不是复制 这个要切记
可以查看一下效果
为什么会出现这样的效果 是因为 循环的时候 由于不停的搬家 导致length 在改变 如果用for的话 这样开始的length 已经被固定啦 所以出现问题，所以说要改成
复制代码 代码如下:
while(oli.length){
ul2.appendChild(oli[0]);
}
这样的都是插入第一条 所以就成功啦 大家可以试试
您可能感兴趣的文章:
- 初学js插入节点appendChild insertBefore使用方法
- javascript实现的动态添加表单元素input,button等(appendChild)
- JavaScript之appendChild、insertBefore和insertAfter使用说明
- js中AppendChild与insertBefore的用法详细解析
- 走马灯效果代码js appendChild实现的无缝滚动
- js AppendChild与insertBefore用法详细对比
- javascript appendChild,innerHTML,join性能比较代码
- javascript使用appendChild追加节点实例
- js利用appendChild对<li>标签进行排序的实现方法
- JS中appendChild追加子节点无效的解决方法
相关文章
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)
版本虽然很老也不符合标准了，不过代码是值得参考的，需要右键菜单的朋友可以参考下。2010-01-01
for循环 + setTimeout 结合一些示例(前端面试题）
最近在学习node.js开发资料，正好碰到了for循环+settimeout的经典例子，下面小编给大家分享for循环 + setTimeout 结合一些示例代码，需要的朋友参考下吧2017-08-08
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速、动态和交互式网页的技术,它的主要优势在于能够在不刷新整个网页的情况下与服务器进行数据交互,这篇文章主要给大家介绍了关于常见Ajax下载文件方式以及报错解决办法的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了前端开发基础javaScript的六大作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要通过一个实例，简单介绍了javascript arguments使用方法，小伙伴们参考下。2014-12-12
本文主要介绍了Javascript中的 “&” 和 “|” 的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇文本框只能输入数字的js代码(含小数点)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
JS模块与命名空间的介绍，需要的朋友可以参考一下2013-03-03
客户端效果，效率自然不错。以前的做法是偶数行时给li加一个class,方法当然不可取，如果后台读取再加class就很麻烦了，看看这个效果2007-08-08
下面小编就为大家带来一篇JavaScript使用atan2来绘制箭头和曲线的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论