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]);

}

這樣的都是插入第一條 所以就成功啦 大家可以試試