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 insertBefore使用方法
- javascript实现的动态添加表单元素input,button等(appendChild)
- JavaScript之appendChild、insertBefore和insertAfter使用说明
- js中AppendChild与insertBefore的用法详细解析
- 走马灯效果代码js appendChild实现的无缝滚动
- js AppendChild与insertBefore用法详细对比
- javascript appendChild,innerHTML,join性能比较代码
- javascript使用appendChild追加节点实例
- js利用appendChild对<li>标签进行排序的实现方法
- JS中appendChild追加子节点无效的解决方法
