分配的innerHTML导致不同的结构

Question

我尝试将

<p><div></div>Hello</p>

分配给innerHTML，但它导致了不同的结构：

<p></p><div></div>Hello<p></p>

。这是错误还是预期行为？

<div>

元素不能放在

<p>

元素里面吗？

代码：

const div = document.createElement("div")
div.innerHTML = "<p><div></div>Hello</p>";
console.log(div.innerHTML);

预期输出：

<p><div></div>Hello</p>

我得到的结果：

<p></p><div></div>Hello<p></p>

Answer 1

将

<div>

放在

<p>

中是无效的 HTML。因此，许多浏览器在遇到起始

<p>

标签时会自动关闭打开的

<div>

标签。

要了解特定类型的元素可以有效包含哪些内容，您可以查阅 MDN Web Docs 上元素文档页面的“技术摘要”部分或查阅 HTML 规范。

对于段落元素，文档指出其允许的内容是“短语内容”。

短语内容是仅元素子集所属的特定内容类别。

<div>

元素不是措辞内容，因此它不能放入段落中。