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 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
js控制table合并具体实现
Feb 20 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
js实现不重复导入的方法
Mar 02 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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中实现进程间通讯
2006/10/09 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python实现爬取并分析电商评论
2020/06/19 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
自荐书模板
2013/12/15 职场文书
求职意向书
2014/04/01 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年质量工作总结
2014/11/22 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang