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 和 document.all 分别什么时候用
Jun 22 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
js函数和this用法实例分析
Mar 13 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python学习之编写查询ip程序
2016/02/27 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
入党自我评价优缺点
2014/01/25 职场文书
安全协议书范本
2014/04/21 职场文书
求职自我评价范文100字
2014/09/23 职场文书
暑期实践个人总结
2015/03/06 职场文书
《夸父追日》教学反思
2016/02/20 职场文书