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学习笔记--Sqlite数据库
前几天学习了Android中的数据存储,包括文件存储,SharedPreferences存储,还有就是Acndroid中的特色:SQLite数据库存储了.让我比较惊讶的是Android中竟然内嵌了一个 ...
- [Everyday Mathematics]20150223
是否存在 $3\times 3$ 阶实方阵 $A$ 使得 $\tr A=0$ 且 $A^2+A^T=I$?
- Loadrunner脚本之C语言文件处理函数
一.打开文件 打开文件使用库函数中的fopen函数.fopen函数会为要打开的文件新建一个流,然后返回一个指向file型对象的指针,该file型对象中保存了控制这个流所需要的信息. fp=fopen( ...
- 镜头覆盖范围FOV 的规划与FOV去四角
本文纲要: 规划FOV的原因 FOV去四角 简单的声明 FOV查找思路 查找FOV的代码 TNoFourCornersRect结构及Contains函数 判断两个矩形是否相交 延伸与拓展 本文内容: ...
- 一个有趣的模拟光照的shader(类似法线贴图)
最近使用unity,碰到到一个很有趣的例子.场景无光线,却模拟出了光照,效果挺好.其思路与法线贴图原理异曲同工. 原作者提供的效果印象深刻. 模型除了使用原来的diffuse贴图外,还用到了一张模拟记 ...
- 2014搜狗前端面经【B事业部】
本来就投了一份简历,后来又收到了个B事业部的面试电话,今天刚面完一面,总体感觉还是很基础的,其中一名面试官帅到不行啊!另一个也不差,真是幸胡...(sorry,跑题了...) 上来先做了份笔试题,超级 ...
- VS2012打包部署Winform程序
打包前的准备工作: 新建一个打包部署项目,点OK,如果是第一次使用的话,会打开一个网页,按照提示的步骤来做, 点击上面的step2的网址,进入到另一个网页: 填写完右边的信息,点击“download ...
- NServiceBus-性能测试
NServiceBus: 有效地处理一个消息 处理大量并发 尺度大小不同的服务器 尺度低规格的设备 的最终平衡速度和安全. 基准 许多参数会影响测量性能.最明显的是硬件服务器和CPU核的数量,大小的内 ...
- 了解shell
1. shell 脚本文件第一行: #!/bin/sh 或 #!/bin/bash "#!" 又称为纪数,在执行bash脚本的时候,内核会根据它来确定该用哪个程序来解释脚本 ...
- 第二百一十一天 how can i 坚持
参与感.做项目要有激情. 睡觉.