刚刚创建的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模式在空div上失败时发现了它。

我已经在Chromium和Opera中测试了这种行为，因此它似乎与浏览器无关。

有人对此有解释吗？

Answer 1

这是因为jQuery使用document.createElement表示“快速”HTML字符串，但jQuery.buildFragment表示所有其他（更“复杂”）HTML字符串。 <div></div>被认为是快速的，而<div>a</div>则不是。

我设置了一个小提琴，以便您查看：http://jsfiddle.net/PzBSY/2/。

“快速”是defined，带有正则表达式：

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

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

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

Answer 2

这里target可以是任何有效的jQuery选择器。

只有$('<div></div>')不会为您的DOM创建任何节点。它只是虚拟地创建它，而不是将它放在Document上。要将其嵌入到DOM中，您需要使用append(), appendTo(), insert()等方法。

$('target').append($('<div class="latest"></div>'));
$('div.latest').parent();

在这里，我用div插入latest并在添加后使用parent()方法检索其父节点。