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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
React Router基础使用
Jan 17 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 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作的文本留言本的例子(二)
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python装饰器使用方法实例
2013/11/21 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
宣传标语大全
2014/07/01 职场文书
离婚协议书范本2014
2014/10/27 职场文书
财务个人年度总结范文
2015/02/26 职场文书