JQuery刚刚创建的空div没有文档片段作为父级

Question

当使用 jQuery 创建新的 html 节点时

$('<some-node>some html code</some-node>');

在您附加它之前，它不会成为 DOM 的一部分。但这并不意味着该节点没有父节点。

如果节点创建时非空，例如:

var myNewNode = $('<div>Hello</div>');

您可以检查父级:

myNewNode[0].parentNode; // Who is the parent?

看看你得到

DocumentFragment

结果。 DocumentFragment 是一些类似于 document 的对象，但不是 DOM 树的一部分。

奇怪的事情来了。当您创建一个空节点时，例如

var myNewEmptyNode = $('<div></div>');

并尝试检查其内容

myNewEmptyNode[0].parentNode; // Who is now the parent?

令人惊讶的是你得到了

null

我无法理解这种行为，并且在 jQuery 文档中没有找到任何相关内容。我在尝试调试为什么 javascriptMVC mxui modal 在空 div 上失败时发现了它。

我已经在 Chromium 和 Opera 中测试了此行为，因此它似乎不是与浏览器相关的问题。

有人对此有解释吗？

Answer 1

这是因为 jQuery 使用 document.createElement对于“快速”HTML 字符串，但是 jQuery.buildFragment对于所有其他(更“复杂”)HTML 字符串。 <div></div>被认为很快，而 <div>a</div>不是。

我设置了一个 fiddle ，以便您可以检查:http://jsfiddle.net/PzBSY/2/ .

“快”是 defined与正则表达式:

var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

传递空 div 字符串，但不传递非空 div 字符串。请注意 if / else block在检查这两个分支之后。

所以这基本上是因为 jQuery 显式地使用非空 div 构建文档片段，而它不使用空 div (它只是使用 document.createElement("div") 来代替)。