刚刚创建的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某些对象类似于documentDOM树的一部分.

奇怪的是现在来了.当你创建一个空节点时,比如

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/.

"快速" 用正则表达式定义:

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

它传递空div字符串,但不传递非空div字符串.请注意检查后的if/ elseblock是否为两个分支.

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