我正在搞乱一些简单的 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 节点的引用无效。我在这里做错了什么？
当你这样做时：
document.body.innerHTML += '<div id="div2">some text</div>';
与此相同：
document.body.innerHTML = document.body.innerHTML + '<div id="div2">some text</div>';
如您所见，它替换了整个身体，重新创建了所有元素。
您不是在“操纵” innerHTML，而是在覆盖它！
当您+=在.innerHTML最终结果上使用时，您最终会序列化整个 DOM，附加新字符串，然后将整个生成的 HTML 字符串反序列化回 DOM 节点。在这个过程中，所有现有的 DOM 节点都会被销毁。
恕我直言，你不应该用它.innerHTML来操作DOM 节点，你应该只用它来创建它们。
你可以这样使用：
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
你应该像这样使用，我认为它会正常工作。
<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>