8

在使用 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 中测试过这种行为，所以它似乎不是与浏览器相关的问题。

有人对此有解释吗？

4

2 回答 2

12

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

我设置了一个小提琴，所以你可以检查：http: //jsfiddle.net/PzBSY/2/。

“快速”是用正则表达式定义的：

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

它传递空的 div 字符串，但不传递非空的 div 字符串。注意检查后的if/else块，这使得两个分支。

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

于 2012-04-29T15:32:00.207 回答
1

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

only$('<div></div>')不会为您的 DOM 创建任何节点。它只是虚拟地创建它，但没有将它放置到文档中。要将其插入到您的 DOM 中，您需要使用诸如append(), appendTo(), insert()etc之类的方法。

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

在这里，我插入了一个divwith 类，并在附加它之后使用方法latest检索其父节点。parent()

于 2012-04-29T13:17:10.843 回答