jQuery acaba de crear div vacío no tiene fragmento de documento como padre

Question

Al crear un nuevo nodo HTML en jQuery usando

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

no se convertirá en parte del DOM, hasta que lo conecte. Sin embargo, no significa que el nodo no tenga padre.

Si el nodo se creó unempty, por ejemplo .:

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

Puede comprobar el padre:

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

y ver a obtener

DocumentFragment 

como resultado. DocumentFragment es un objeto similar a document, sin embargo, no forma parte del árbol DOM.

Lo extraño viene ahora. Cuando se crea un nodo vacío, como

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

y tratar de comprobar su contenido

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

sorprendentemente usted consigue

null 

No puedo entender este comportamiento y no encontró nada sobre él en jQuery documentación. Lo encontré al intentar depurar por qué javascriptMVC mxui modal estaba fallando en un div vacío.

He probado este comportamiento tanto en Chromium como en Opera, por lo que no parece ser un problema relacionado con el navegador.

¿Alguien tiene una explicación para esto?

Answer 1

Esto se debe al hecho de que jQuery usa document.createElement para cadenas HTML "rápidas", pero jQuery.buildFragment para todas las demás cadenas HTML (más "complejas"). <div></div> se considera rápido, mientras que <div>a</div> no lo es.

Configuré un violín para que pueda consultar: http://jsfiddle.net/PzBSY/2/.

"rápido" es defined con la expresión regular:

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

la que pasa la cadena div vacío, pero no la cadena div que no esté vacía.Tenga en cuenta el if/else block después del cheque que hace las dos ramas.

Así que es básicamente porque jQuery construye explícitamente un fragmento de documento con el div no vacío, mientras que no lo hace con el div vacío (simplemente usa document.createElement("div") en su lugar).

Answer 2

Aquí target pueden ser cualquier selector jQuery válido.

solamente $('<div></div>') no crea ningún nodo en su DOM. Simplemente lo crea virtualmente pero no lo coloca en Document. A la inserción en el DOM es necesario utilizar un método similar append(), appendTo(), insert() etc.

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

Aquí detalle A div con la clase latest y después añadiendo que recupero su nodo padre usando parent() método.