屏幕截图显示了萤火虫监视窗口。
为什么它解析几乎相同的 HTML 是错误的？我预计第二行中只有一个元素，而不是元素数组。
【问题讨论】：
<p> 只允许包含内联元素，而不是像 div 这样的块。 jQuery 不是罪魁祸首。用原始 HTML 构建相同的结构，然后检查结果——结果是一样的。
标签： javascript jquery html parsing dom
浏览器没有错误。 <p><div></div></p> 是无效的 HTML。
浏览器分析这两个代码不同的原因是<p>元素只允许包含inline elements。
<p> 和 <div> 都是 block elements，但 <p> 不能包含不是短语内容的 <div>。因此，当浏览器读取该代码时，他会找到元素<p>，然后是意外的<div>。浏览器对标记错误非常宽容，因此浏览器关闭p 标签并转到下一个 div 元素。然后是第三个元素（也是错误的 HTML，因为它错过了开始标记），因此它被读取为一个新元素。
第一种情况你有嵌套的元素，所以浏览器显示一个元素；
第二种情况你有三个元素在同一个 DOM 树级别，所以一个元素数组就是浏览器的答案。
它们都渲染，但错误的渲染可能会产生意想不到的结果。浏览器将如何读取错误标记加上CSS 将很难预测。
所以，浏览器读取/解析代码为：<p></p><div></div><p></p>，给你不同的结果。
W3 / HTML5 规范：
p – paragraph
div – generic flow container。
MOZILLA 开发者网络：
MDN: p element（检查“允许的内容”）
MDN: block-level elements
【讨论】：
<p> 标签用于文本。
<p> 是一个块元素，也意味着里面有文本。里面有<div>，这也是一个块元素，这很可能是DOM创建这样的元素的原因。
无论哪种情况，结果都没有错。
<p> HTML 标记只能包含短语内容元素。但是，<div> 不是短语内容（而是流元素）。 （简化的 <p> 可能包含内联元素，但 <div> 是块元素。）因此，第二个示例中的 HTML 代码无效（因为不符合标准）。
结果是浏览器 HTML 到 DOM 解析器——当然是由 jQuery 触发的——按如下方式处理 HTML：
<p> 正在打开的块<div> 正在打开的块<p> 中的 div 块无效
<p>块所以等效的 HTML 代码将是<p></p><div></div><p></p>，这是有效的 HTML。因此解析器会为您纠正 HTML。
因为我们现在有三个顶级元素而不是嵌套元素只有一个顶级元素，所以您会得到一个由 DOM 元素组成的 array 元素，而不是像您预期的那样一个元素。
Web 浏览器对于不符合标准的 HTML 代码非常强大。您在此处注意到并指出的行为是解析器尽最大努力从无效 HTML 代码中理解的众多示例之一。
参考资料：
【讨论】：