js原生appendChild的bug解决心得分享_javascript技巧
程序员文章站
2022-03-29 16:31:21
...
appendChild 主要是用来追加节点 插入到最后
window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;iul2.appendChild(oli[i]);
}
}
把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
}
}
讲Id为ul1的内容插入到ul2里面
- 1
- 2
- 3
- 4
- 5
- 6
把ul1内容插入到ul2里面,这个其实是搬家而不是复制 这个要切记
可以查看一下效果
为什么会出现这样的效果 是因为 循环的时候 由于不停的搬家 导致length 在改变 如果用for的话 这样开始的length 已经被固定啦 所以出现问题,所以说要改成
复制代码 代码如下:
while(oli.length){
ul2.appendChild(oli[0]);
}
这样的都是插入第一条 所以就成功啦 大家可以试试
上一篇: CCPry JS类库 代码_js面向对象
下一篇: Vue数据通信的详细介绍(附实例)
推荐阅读
-
js中浮点型运算BUG的解决方法说明_javascript技巧
-
js中浮点型运算BUG的解决方法说明_javascript技巧
-
解决JS浮点数运算出现Bug的方法_javascript技巧
-
解决JS浮点数运算出现Bug的方法_javascript技巧
-
灵活应用js调试技巧解决样式问题的步骤分享_javascript技巧
-
js鼠标滑过弹出层的定位IE6bug解决办法_javascript技巧
-
灵活应用js调试技巧解决样式问题的步骤分享_javascript技巧
-
js原生appendChild的bug解决心得分享_javascript技巧
-
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍_javascript技巧
-
js完美解决IE6不支持position:fixed的bug_javascript技巧