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 相关文章推荐
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
jQuery聚合函数实例
May 21 Javascript
js实现新年倒计时效果
Dec 10 Javascript
javascript冒泡排序小结
Apr 10 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
微信小程序文章列表功能完整实例
Jun 03 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
JavaScript 监听组合按键思路及代码实现
Jul 28 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php 过滤危险html代码
2009/06/29 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python isinstance函数介绍
2015/04/14 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
十八大闭幕感言
2014/01/22 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
法制演讲稿
2014/09/10 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书