爲什麼JavaScript在我操作body的innerHTML後使DOM引用無效？

我用一些簡單的JS代碼瞎搞，並遇到了以下幾點：爲什麼JavaScript在我操作body的innerHTML後使DOM引用無效？

document.body.innerHTML += '<div id="div1">some text</div>'; 

var my_div = document.getElementById('div1'); 

document.body.innerHTML += '<div id="div2">some text</div>'; 

my_div.innerHTML = "some other text"; //doesn't work

這似乎是操縱的DOM節點的引用是無效的父元素（身體）之後。我在這裏做錯了什麼？

來源

2013-08-20 debel

它沒有第三行工作嗎？ – Niklas

@尼克拉斯是的，如果你換了第二條和第三條線。 – debel

當你這樣做：

document.body.innerHTML += '<div id="div2">some text</div>';

是一樣的：

document.body.innerHTML = document.body.innerHTML + '<div id="div2">some text</div>';

正如你可以看到替換整個身體，重建的所有元素。

來源

2013-08-20 07:46:01 RichieHindle

謝謝，RichieHindle！ – debel

你不是「操縱」innerHTML，你是覆蓋它！

當您在.innerHTML最終結果使用+=是你最終連載整個DOM，追加新的字符串，然後deserialising整個生成的HTML字符串返回到DOM節點。在這個過程中，所有現有的DOM節點都被破壞。

恕我直言，你不應該使用.innerHTML來操縱 DOM節點，你應該只用它來創建他們。

來源

2013-08-20 07:47:09 Alnitak

謝謝，Alnitak – debel

我明白我在做什麼的愚蠢。我不應該使用'.innerHTML'，除非由於某種原因我需要解析** row ** HTML。對於DOM的目的，我最好使用'document.createElement' – debel

你可以使用這樣的：

document.body.innerHTML += '<div id="div1">some text</div>'; 

var my_div = document.getElementById('div1'); 

var div2 = document.createElement('div'); 
div2.id = 'div2'; 
div2.innerHTML = 'some text'; 

my_div.parentNode.insertBefore(div2, my_div); 

my_div.innerHTML = "some other text"; //work

來源

2013-08-20 07:56:15

這似乎很容易讓它錯誤的方式。我沒有考慮'.innerHTML'如何在幕後工作，並且無法理解我的瀏覽器行爲背後的邏輯。不管怎麼說，還是要謝謝你：） – debel

-1

你應該使用這樣的，我認爲它會正常工作。

<body> 

    </body> 

<script type="text/javascript"> 
document.body.innerHTML += '<div id="div1">some text</div>'; 

var my_div = document.getElementById('div1'); 

document.body.innerHTML += '<div id="div2">some text</div>'; 

my_div.innerHTML = "some other text"; //doesn't work 
</script>

來源

2013-08-20 08:21:59

爲什麼JavaScript在我操作body的innerHTML後使DOM引用無效？

回答

相關問題