El método posterior de jQuery no funciona con los elementos recién creados

Question

Hasta donde sé, el siguiente código debería funcionar, creando un elemento <div> y luego creando un elemento <p>; la expresión debe resultar en un objeto jQuery con dos elementos:

$("<div>first element's content</div>").after("<p>second element's content</p>"); 

Sin embargo, lo que consigo es muy diferente. The documentation (consulte el encabezado "Insertar nodos de DOM desconectados") me dice que el código anterior debería dar como resultado un objeto jQuery, capturar tanto fragmentos de código HTML como crear los dos elementos DOM. Pero, lo que he obtenido, en varias versiones diferentes de jQuery, todas por encima de 1.4, es un objeto jQuery con solo 1 nodo. Sin embargo, el siguiente código funciona bien, volviendo (lo que creo que es) el objeto correcto jQuery, dos elementos en el interior:

$("<div></div>").after("<p>second element's content</p>"); 

Y este ejemplo funciona así:

$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>"); 

parece que el .after() El método funciona bien si el primer nodo DOM que se está creando está vacío, pero no cuando no lo está (independientemente del contenido de los nodos DOM posteriores que se le añaden).

¿Me falta algo sobre el funcionamiento interno de jQuery, peculiaridades DOM y/o peculiaridades de JavaScript, o es simplemente un error jQuery que persiste desde la versión 1.4 hasta la 1.7?

(Here's a meager JSFiddle demostrando el tema muy claramente.)

Answer 1

Esto fue un error conocido en jQuery < 1.9. Ver http://bugs.jquery.com/ticket/8759

En jQuery> = 1.9, la following information from the upgrade guide hay que señalar:

Antes de 1,9, .after(), .before() y .replaceWith() trataría de añadir o cambiar los nodos en la corriente jQuery establecer si el primer nodo en el conjunto no estaba conectado a un documento, y en esos casos devuelve un nuevo conjunto jQuery en lugar del conjunto original. Esto creó varias inconsistencias y errores: el método podría o no devolver un nuevo resultado según sus argumentos. A partir de 1.9, estos métodos siempre devuelven el conjunto original sin modificar e intentar usar .after(), .before(), o .replaceWith() en un nodo sin un padre no tiene ningún efecto, es decir, ni el conjunto ni los nodos que contiene cambian.

Answer 2

Uso add() para añadir objetos a la colección. Uso after() más en los elementos DOM que ya existen o que están en caché en una variable, pero la mayoría de las veces, si trabaja con marcado dinámico es más práctico usar el equivalente insertAfter().

$("<div>first element's content</div>").add("<p>second element's content</p>"); 

EDIT:

Esto funciona ...

var $el = $('<div/>', { 
    text: 'hey there' 
}).after('<p>Lorem</p>'); 

Answer 3

me pareció que estaba todavía a veces tienen problemas con .add() en lugar de .after(), por lo que otra manera fácil de conseguir evitar este error es hacer un tiro de elemento de envoltura, .append() los elementos relacionados, y utilizar .html() para obtener sólo el contenido interno de la envoltura.

Ejemplo:

$('body').append(
    $('<span/>').append(
     $("<div>first element's content</div>") 
    ).append(
     $("<p>second element's content</p>") 
    ).html() 
); 

Esto añadirá la <div> y <p> pero descartar el exterior <span>. He encontrado que esto generalmente funciona bien con .append() pero puede tener problemas con .appendTo()