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 回答