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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
Puppet的一些技巧
Sep 17 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
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读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
什么是python的自省
2020/06/21 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
查环查孕证明
2014/01/10 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
门卫岗位职责
2015/02/09 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python
Python实现数据的序列化操作详解
2022/07/07 Python