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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
理解AngularJs指令
Dec 10 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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 学习资料零碎东西
2010/12/04 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
jQuery事件对象总结
2016/10/17 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
存储过程和sql语句的优缺点
2014/07/02 面试题
水务局局长岗位职责
2013/11/28 职场文书
思想汇报格式
2014/01/05 职场文书
小学二年级评语
2014/04/21 职场文书
会计学专业求职信
2014/07/17 职场文书
人事专员岗位职责
2015/02/03 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis
 python中的元类metaclass详情
2022/05/30 Python