本文探讨在JavaScript中使用原生appendChild移动DOM节点时，因目标节点长度动态变化导致的循环异常问题。通过对比for循环与while循环的执行机制，分析为何移动节点会改变集合长度，并提供使用while循环配合索引0的正确解决方案，确保节点完整迁移。
appendChild移动节点导致的长度变化问题
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中，这属于节点移动而非复制，需注意这一区别。
可以查看一下效果
出现上述现象的原因是，在循环过程中，由于节点不断被移动，导致oli的length属性值发生变化。如果使用for循环，初始时length已被固定，因此会出现问题，所以需要改用以下写法：
参考以下代码示例：
while(oli.length){
ul2.appendChild(oli[0]);
} 这样每次都是插入第一条，从而成功完成操作，大家可以试试