Question

Aka：为什么<div></div>和<div />彼此不相同？

考虑以下HTML + js：

setTimeout(function() { 
    document.getElementById("message2").innerHTML = "blah";
}, 1000);

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="message2" />
        <div id="message1" >Hello</div>
    </body>
</html>

正如您所看到的，在执行代码段时，首先显示“Hello”，然后简单地显示“Hello”消失（*）并显示“blah”。（即innerHTML的{{1}}已更改，并且作为副作用，message2消失了。）

（*）我在两个不同的浏览器（Linux / FF和Mac / Safari）上检查了这个，所以我非常有信心这不是特定于浏览器的问题。

另一方面，如果将message1扩展为打开/关闭代码，则更改其message2不会影响innerHTML：

message1

setTimeout(function() { 
		document.getElementById("message2").innerHTML = "blah";
}, 1000);

问题：

为什么另一个div在第一种情况下会消失？
为什么“紧凑”和“扩展”形式有不同的效果？（我认为它们完全相同。）

Answer 1

此div <div id="message2" />未按您认为的那样关闭。以下是HTML's self closing tags的列表。请注意，div不是其中之一。

见：

＆＃13;

setTimeout(function() { 
		document.getElementById("message2").innerHTML = "blah";
}, 1000);

＆＃13;

<html>
	<head>
		<title>Test</title>
	</head>
	<body>
        <div id="message2" >
		<div id="message1" >Hello</div>
    </div>
	</body>
</html>

＆＃13;

所以在你的第二个片段中，你只需更改第一个div的innerHTML，而第二个就在那里。

更改div的innerHTML会清除整个内容

1 个答案: