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中的Screen屏幕对象
Jan 16 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
React Router基础使用
Jan 17 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
vue实现图片上传到后台
Jun 29 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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获取英文姓名首字母的方法
2015/07/13 PHP
二级域名转向类
2006/11/09 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
几种tab切换详解
2017/02/03 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
python入门教程之识别验证码
2017/03/04 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
银行委托书范本
2014/04/04 职场文书
艺术教育实施方案
2014/05/03 职场文书
啤酒节策划方案
2014/05/28 职场文书
企业文化宣传标语
2014/06/09 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python