javascript - 为什么在我操作主体的 innerHTML 后 JavaScript 使 DOM 引用无效？

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

如您所见，它替换了整个 body ，重新创建了所有元素。