innerHTML副作用？

我遇到了DOM元素引用的一些問題，我想我已經跟蹤了一些與更新innerHTML有關的事情。innerHTML副作用？

在此示例中，在第一個警報中，兩個變量按預期引用相同的元素。但奇怪的是，在更新父元素（body）的innerHTML之後，儘管兩個變量都沒有觸及，但它們被認爲是不同的。

<html> 
<head> 
    <script type="text/javascript"> 

    var load = function() { 
    var div1 = document.createElement('div'); 
    div1.innerHTML = 'div1'; 
    div1.id = 'div1'; 

    document.body.appendChild(div1); 
    alert(div1 === document.getElementById('div1')); // true 

    document.body.innerHTML += '<div>div2</div>'; 
    alert(div1 === document.getElementById('div1')); // false 
    }; 

    </script> 
</head> 

<body onload="load();"> 
</body> 

</html>

使用==代替===會產生相同的結果。我在Firefox 3.5和IE6中得到了相同的結果。任何想法是什麼導致第二次警報評估爲false？

來源

2010-01-08 Ed Mazur

當您獲得body的innerHTML值時，向其中添加一個字符串並將其放回正文中，正文中的所有元素都將從HTML字符串重新創建。變量中的內容是對頁面中不再存在的元素的引用。

來源

2010-01-08 10:01:06 Guffa

是的。如果你已經使用了'document.createElement'然後'document.body.appendChild'作爲第二個div，那麼第一個div將保持原位。 – 2010-01-08 10:02:59

這是因爲...

document.body.innerHTML += '<div>div2</div>';

...是不是真正的「追加」 ..它是一個完整的更換。當然，替換等於舊內容+新內容，事實是它是一個新的字符串，新的DOM元素是圍繞它構建的。

來源

2010-01-08 10:02:13 Matt

innerHTML副作用？

回答

相關問題