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 相关文章推荐
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
Vue Element plus使用方法梳理
Dec 24 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
nodejs基础应用
2017/02/03 NodeJs
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python线程指南分享
2019/11/19 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
总经理任命书
2014/03/29 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
高中美术教学反思
2016/02/17 职场文书