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 ...
随机推荐
- HDU 5127 Dogs' Candies
Dogs' Candies Time Limit: 30000/30000 MS (Java/Others) Memory Limit: 512000/512000 K (Java/Others) T ...
- [禅悟人生]"执著"是自缚的茧
宋代苏东坡和佛印禅师是好朋友,他们习惯拿对方开玩笑.有一天,苏东坡到金山寺和佛印禅师打坐参禅,苏东坡觉得身心通畅,于是问禅师道:“禅师!你看我坐的样子怎么样?” “好庄严,像一尊佛!” 苏东坡听了非常 ...
- RPC调用框架比较分析
什么是RPC: RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. 简言之,RPC ...
- Yii入门教程
1准备Yii源码 首先新建helloyii目录作为Web应用的根目录,并添加到Nginx的配置文件中.然后将Yii框架源码部署到helloyii下,目录结构如下: helloyii/ |-- fram ...
- Web通信之:长轮询(long-polling)(转)
Web通信之:长轮询(long-polling) “轮询”是个耐人寻味的词,第一次看到它的时候我就直接理解为“轮流查询”了.但是看到了英文才知道这个是网络通信专业的术语.轮询,其实就是一群人在排队买东 ...
- 新的小游戏发布啦。Pop Jungle
丛林爱消除是一款画面清新,效果绚丽的消除类休闲游戏.你只需要选中尽可能多的图块,并消除它们就可以得到高分,并有无限多的关卡等待你去征服.一旦你开始玩儿你将无法停止下来,如果你还是消除星星的粉丝,那你更 ...
- sqlserver数据可空插入报错
数据库和C#中均为可空类型. 这时候直接给字段赋值为null parameters[9].Value = null : 执行的时候报错了,一大堆,总之说它少了一个参数. 用sql ser ...
- [转]Linux的chattr与lsattr命令详解
转自:http://www.cnblogs.com/yangxia-test/archive/2013/05/24/3096410.html 这两个命令是用来查看和改变文件.目录属性的,与chmod这 ...
- R 环境内存限制的更改
由于R语言非常消耗内存,所以做较大数据的处理时需要增加内存空间,有以下种方式: 一. 在未开启R之前,在cmd中,输入下面指令 r −−max−mem− s i z e =4Gb 二. 在开启R之后, ...
- 【转】requirejs简单入门
博主今天正式工作啦,工作中用到了js模块化技术,这里转来一个入门教程,很易懂,转给同样刚入门的你们~~ 原地址:http://www.ruanyifeng.com/blog/2012/11/requi ...