为什么$('<p> <div> </ div> </ p>')返回多个节点的数组？

Question

我对$.parseHTML()功能感到困惑.我认为如果源html具有单个根节点,则此函数应返回具有单个DOM节点(根节点)的数组,其中所有内容作为子节点附加.它大部分时间都是这样的,例如:

var nodes = $.parseHTML('<div><div>foo</div></div>');
console.debug(nodes.length); // prints 1

但是,如果根节点是<p>DOM节点的结构丢失并且HTML被分解为多个断开连接的节点:

var nodes = $.parseHTML('<p><div>foo</div></p>');
console.debug(nodes.length); // prints 3

我已经创建了一个jsfiddle,您可以尝试这些案例.

如果我使用$(html)或,它没有任何区别$.parseHTML(html).

有什么特别之处<p>？为什么以不同的方式解析？这是一个bug还是一个功能？

Answer 1

那是因为当解析HTML代码时,它不会以单个根节点结束.

段落中不能包含块元素,因此段落在div元素开始的位置结束.然后段落的结束标记成为第二个段落节点.

因此,您最终得到的元素是:

<p></p>
<div>foo></div>
<p></p>