Question

我正在搞乱一些简单的JS代码并遇到以下情况：

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节点的引用无效。我在这里做错了什么？

Answer 1

执行此操作时：

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

它与此相同：

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

你可以看到替换整个身体，重新创建所有元素。

Answer 2

你没有“操纵”innerHTML，你覆盖它！

在+=上使用.innerHTML后，最终结果是序列化整个DOM，附加新字符串，然后反序列化整个生成的HTML字符串返回DOM节点。在此过程中，所有现有DOM节点都将被销毁。

恕我直言，你永远不应该使用.innerHTML 操纵 DOM节点，你应该只使用它来创建它们。

Answer 3

你可以像这样使用：

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

Answer 4

你应该这样使用，我认为它会正常工作。

    <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>

在我操作body的innerHTML之后，为什么JavaScript会使DOM引用无效？

4 个答案: