为什么JavaScript在我操作主体后使DOM引用无效'；什么是innerHTML？_Javascript_Dom

为什么JavaScript在我操作主体后使DOM引用无效'；什么是innerHTML？

javascript dom

为什么JavaScript在我操作主体后使DOM引用无效'；什么是innerHTML？,javascript,dom,Javascript,Dom,我在处理一些简单的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 t

我在处理一些简单的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

document.body.innerHTML+='some text'；
var my_div=document.getElementById（'div1'）；
document.body.innerHTML+=“一些文本”；
my_div.innerHTML=“其他文本”//不起作用

在操作父元素（主体）之后，对DOM节点的引用似乎是无效的。我做错了什么？

当您这样做时：

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

document.body.innerHTML+='some text'；

与此相同：

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

document.body.innerHTML=document.body.innerHTML+“一些文本”；

如您所见，它将替换整个身体，重新创建所有元素。

执行此操作时：

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

document.body.innerHTML+='some text'；

与此相同：

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

document.body.innerHTML=document.body.innerHTML+“一些文本”；

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

您不是在“操纵”

innerHTML，而是在覆盖它
当您在.innerHTML
上使用+=
时，最终的结果是序列化整个DOM，附加新字符串，然后将整个生成的HTML字符串反序列化回DOM节点。在这个过程中，所有现有的DOM节点都会被销毁
无论如何，您不应该使用。innerHTML
来操作DOM节点，您应该只使用它来创建它们。
您不是在“操作”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

document.body.innerHTML+='some text'；
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=“其他文本”//工作
您可以这样使用：
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

document.body.innerHTML+='some text'；
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=“其他文本”//工作
您应该这样使用，我认为它会很好用
    <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>


document.body.innerHTML+=“一些文本”；
var my_div=document.getElementById（'div1'）；
document.body.innerHTML+=“一些文本”；
my_div.innerHTML=“其他文本”//不起作用
您应该这样使用，我认为它会很好用
    <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>


document.body.innerHTML+=“一些文本”；
var my_div=document.getElementById（'div1'）；
document.body.innerHTML+=“一些文本”；
my_div.innerHTML=“其他文本”//不起作用
如果没有第三行，它可以工作吗？@Niklas是的，如果你交换第二行和第三行，也可以。如果没有第三行，它可以工作吗？@Niklas是的，如果你交换第二行和第三行，也可以。谢谢，RichieHindle！谢谢你，RichieHindle！我理解我所做的事情的愚蠢。我根本不应该使用.innerHTML
，除非出于某种原因我需要解析行HTML。出于DOM的目的，我最好使用document.createElement
我理解我所做的事情的愚蠢。我根本不应该使用.innerHTML
，除非出于某种原因我需要解析行HTML。出于DOM的目的，我最好使用document.createElement
，这样很容易出错。我没有考虑.innerHTML
在幕后是如何工作的，我无法理解浏览器行为背后的逻辑。无论如何，谢谢你：）那样做似乎太容易出错了。我没有考虑.innerHTML
在幕后是如何工作的，我无法理解浏览器行为背后的逻辑。无论如何，谢谢你：）