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 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
Python创建xml的方法
2015/03/10 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
机器学习python实战之决策树
2017/11/01 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python中count函数简单的实例讲解
2020/02/06 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
供用电专业求职信
2014/07/07 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Python学习之包与模块详解
2022/03/19 Python
详解Go语言中Get/Post请求测试
2022/06/01 Golang
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android