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数组Array对象增加和删除元素方法总结
Jan 20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
小程序实现列表倒计时功能
Jan 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性能优化的介绍
2013/06/20 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
华为慧通笔试题
2016/04/22 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
求职信需要的五点内容
2014/02/01 职场文书
房产转让协议书
2014/04/11 职场文书
小学生读书活动总结
2014/06/30 职场文书
语文复习计划
2015/01/19 职场文书
检讨书怎么写
2015/01/23 职场文书
win10清理dns缓存
2022/04/19 数码科技