JavaScript：無法讀取innerHTML內容中的所有元素

我想讀取div的innerHTML中的元素，但似乎正在讀取替代元素。JavaScript：無法讀取innerHTML內容中的所有元素

代碼塊：

<!DOCTYPE html> 
<html> 
    <body> 
    <script type="text/javascript"> 
     var tdiv=document.createElement("div"); 
     tdiv.innerHTML="<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span>"; 

     var cn=tdiv.getElementsByTagName("*"); 
     var len=cn.length; 

     console.log("length: "+len); 
     console.log("tdiv len: "+tdiv.getElementsByTagName("*").length); 

     for(var i=0;i<len;i++){ 
      if(cn[i]){ 
      console.log(i+": "+cn[i].nodeName+": "+cn[i].tagName); 
      document.body.appendChild(cn[i]); 
      } 
     } 
    </script> 
    </body> 
</html>

輸出： a1a3a5

注： A2和A4失蹤。我曾嘗試在所有瀏覽器中使用childNodes和getElementsByTagName("*")，IE，FF，Chrome，Opera，Safari和我看到相同的行爲。

當我在所有跨度之間添加一個空白時，所有元素都被讀取。這是預期的行爲嗎？如果是這樣，爲什麼？

來源

2013-07-22 kcak11

退回的商品是實時的NodeList。您將它們附加到body元素，因此NodeList隨着for循環的每次迭代而縮小。這是導致它出現像是任意跳過元素的原因。

的Try ...

while (cn.length) { 
    cn[0] && document.body.appendChild(cn[0]); 
}

jsFiddle。

當我在所有跨度之間添加一個空白時，所有元素都被讀取。這是預期的行爲嗎？如果是這樣，爲什麼？

是的，它是預期的。它只是意味着不是跳過span元素，而是跳過由空格引入的文本節點。永遠不要依賴這個 - 它非常脆弱。

來源

2013-07-22 07:43:21 alex

謝謝，我通過在for循環中添加了i--和len--來糾正代碼，現在每個元素都被添加到body中。再次感謝。！！ – kcak11

JavaScript：無法讀取innerHTML內容中的所有元素

回答

相關問題