innerHTML赋值后结构不符：<p>内能否嵌套<div>？是Bug还是预期行为？

• <p>元素不能嵌套块级元素（比如<div>），这是HTML规范的明确规定。<p>属于「短语内容」容器，仅允许容纳行内元素或纯文本。
• 浏览器在解析不符合规范的嵌套时，会自动修正结构：
  1. 遇到<p>内的<div>时，浏览器会先闭合当前未结束的<p>标签，输出<p></p>；
  2. 正常渲染<div></div>；
  3. 原代码中Hello之后的</p>没有对应的起始<p>标签，浏览器会自动补一个<p>标签并闭合，最终输出<p></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>

内容的提问来源于stack exchange，提问作者Zack Lee