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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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 Pear 安装及使用
2009/03/19 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php文件操作实例代码
2012/05/10 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python抓取文件夹的所有文件
2018/02/27 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
如何基于python实现不邻接植花
2020/05/01 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
法制宣传月活动方案
2014/05/11 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
批评与自我批评范文
2014/10/15 职场文书
补充协议书
2015/01/28 职场文书
销售经理工作检讨书
2015/02/19 职场文书
个人总结格式范文
2015/03/09 职场文书
会计求职自荐信
2015/03/26 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python