手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js原生appendChild的bug解决心得分享
js原生appendChild的bug解决心得分享
摘要:appendChild主要是用来追加节点插入到最后复制代码代码如下:window.onload=function(){varul2=docu...

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解决心得分享】相关文章:

jQuery封装的tab选项卡插件分享

js实现文本框选中的方法

图片完美缩放

删除javascript所创建子节点的方法

javascript实现炫酷的拖动分页

给网页加个彩色窗口

JQuery给网页更换皮肤的方法

可拖动窗口,附带鼠标控制渐变透明,开启关闭功能

去除链接虚线全面分析总结

javascript嵌套函数和在函数内调用外部函数的区别分析

精品推荐
分类导航