js原生appendChild的bug
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]);
}
这样的都是插入第一条 所以就成功啦 大家可以试试
js原生appendChild的bug的更多相关文章
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
- JS原生实现视频弹幕Demo(仿)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- JS原生评分组件
JS原生评分组件 <html> <head> <meta http-equiv="Content-Type" content="text/h ...
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
随机推荐
- android技巧:EditText输入错误时该怎样提示用户
验证用户输入内容(EditText)应该及时准确的告诉用户,那么在Android系统中提示用户通常有以下做法: 1) 使用Toast提示 1 Toast.makeText(this, "邮箱 ...
- Delphi 提示在Delphi的IDE中,按Ctrl+Shift+G键可以为一个接口生成一个新的GUID。
对于Object Pascal语言来说,最近一段时间最有意义的改进就是从Delphi3开始支持接口(interface),接口定义了能够与一个对象进行交互操作的一组过程和函数.对一个接口进行定义包含两 ...
- Topogun教学视频
http://www.iqiyi.com/w_19rrfss6dd.html http://www.iqiyi.com/w_19rrfsvo3h.html http://www.iqiyi.com/w ...
- 看过的bootstrap书籍(附下载地址)
http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...
- WebGIS的大众化服务
WebGIS是Web技术与GIS相结合的产物.WebGIS的真正意义在于,它将GIS从专业应用推向了大众化服务,同时为地理信息共享提供了方便而有效的途径. 一.ESRI大会关于WebGIS的报告 纵观 ...
- 隐藏StatusBar 非setStatusBarHidden
UIWindow * window = [[UIApplication sharedApplication].windows lastObject]; 隐藏 [window setWindowLeve ...
- error while loading shared libraries: lib******: cannot open shared object file: No such file or directory
程序编译成功后,运行时错误: error while loading shared libraries: libevent-2.0.so.5: cannot open shared object fi ...
- 树上的DP
CF#196B http://codeforces.com/contest/338/problem/B 题意:在一颗树上,给m个点,求到所有m个点距离不超过d的点的个数,所有路径长度为1. 分析:问题 ...
- 给windows 7安装文件添加USB3.0驱动
给Air安装win7进入语言与区域选择之后,发现键盘触摸板都失灵. 原因:新款的 Macbook Air 2013 因为使用了 USB3.0 端口键盘和触摸板设备,所以在安装 Windows 7 ...
- OSPF虚链路配置.示例2
先看一个拓扑图 黄色区域是area0,即骨干区域,如果如图示RT1与RT6之间的链路断了,那么会出现骨干区域被“分裂”的情况,很明显骨干区域是不能被分割开的,出现这种状况的时候可能会影响到整个自制系统 ...