js原生appendChild的bug解决心得分享


Posted in Javascript onJuly 01, 2013

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]); 
}

这样的都是插入第一条 所以就成功啦 大家可以试试
Javascript 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
JSON取值前判断
Dec 23 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
详解Vue的sync修饰符
May 15 Vue.js
Jquery时间验证和转换工具小例子
Jul 01 #Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 #Javascript
js函数排序的实例代码
Jul 01 #Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 #Javascript
jQuery提交多个表单的小例子
Jun 30 #Javascript
用jquery存取照片的具体实现方法
Jun 30 #Javascript
js正文内容高亮效果的实现方法
Jun 30 #Javascript
You might like
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python中类型检查的详细介绍
2017/02/13 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python实现Flappy Bird源码
2018/12/24 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
django rest framework使用django-filter用法
2020/07/15 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
C#面试问题
2016/07/29 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
夫妻吵架保证书
2015/05/08 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis