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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
javascript动态创建链接的方法
May 13 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
原生js+canvas实现验证码
Nov 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
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python用SSH连接到网络设备
2021/02/18 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
如何写出高性能的JSP和Servlet
2013/01/22 面试题
应届生财务会计求职信
2013/11/05 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
同学会主持词
2014/03/18 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
甘南现象心得体会
2014/09/11 职场文书
六年级学生评语大全
2014/12/26 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记