jQuery: ¿Cuál es la diferencia entre después () y InsertAfter ()

Question

jQuery tiene un método .after(), y también un método .insertAfter().

¿Cuál es la diferencia entre ellos? Creo que puedo utilizar .after() para insertar elementos después de un elemento seleccionado (o elementos). ¿Está bien? ¿Qué es para .insertAfter()?

Answer 1

Son opuestos mutuos.

' después ' inserta el argumento tras el selector.

' InsertAfter ' inserta el selector después de la discusión.

A continuación se muestra un ejemplo de la misma cosa hecha con:

InsertAfter ():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( "<p>Test</p>" ).insertAfter( ".inner" );
Each inner <div> element gets this new content:
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

después de ():

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

Answer 2

Son inversas entre sí. Como se explica en la documentación del jQuery :

Este:

$("p").insertAfter("#foo");

Es lo mismo que esto:

$("#foo").after("p");

Y por último, InsertAfter devuelve todos los elementos insertados, mientras que .after () devolverá el contexto en el que se llama.

Answer 3

Todas las respuestas hasta el momento son claras como el barro ;-) (Así que voy a tomar una puñalada en ella también!)

Si usted comienza con este código HTML:

<p id="pOne">Para 1</p>
<p id="pTwo">Para 2 <span id="sMore">More</span></p>

Después inserta algunos nueva contenido después de las etiquetas a juego:

$("p")                       // Match all paragraph tags
    .after("<b>Hello</b>");  // Insert some new content after the matching tags

El resultado final es:

<p id="pOne">Para 1</p><b>Hello</b>
<p id="pTwo">Para 2 <span id="sMore">More</span></p><b>Hello</b>

Por otro lado, InsertAfter mueve uno o más elementos que ya existe en el DOM después de los elementos seleccionados ( Realmente, este método podría ser llamado MoveAfter ):

$("#sMore")                    // Find the element with id `sMore`
    .insertAfter("#pOne");     // Move it to paragraph one

El resultado es:

<p id="pOne">Para 1</p><span id="sMore">More</span>
<p id="pTwo">Para 2</p>

Answer 4

(después y antes):

$('selector').after('new_content');
$('selector').before('new_content');

tiempo (InsertAfter y insertBefore):

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');

Answer 5

$("p").insertAfter("#foo");

==

$("#foo").after("p")

Answer 6

Comprobar el href="http://docs.jquery.com/Manipulation/insertAfter" :

$("#foo").after("p")

es el mismo que:

$("p").insertAfter("#foo");

Answer 7

después (contenido) Devuelve: jQuery?

Insertar contenido después de cada uno de los elementos emparejados.

InsertAfter (selector) Devuelve: jQuery

Insertar todos los elementos coincidentes tras otro, especificados, conjunto de elementos.

Answer 8

También parece que la aprobación de los atributos del elemento insertado no funciona con ".insertAfter", pero trabaja con ".after"

funciona:

$('#element').after('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' });

no funciona:

$('<p>Test</p>', { 'class': 'element_class', 'id': 'element_id' }).insertAfter('#element');

* Editar: parece que no funciona con ".after" tampoco, pero sólo con ".appendTo"

Answer 9

aquí se puede encontrar un muy, muy buen tutorial de cómo agregar contenido a una página usando el métodos prepend jQuery (), Prefijopara (), append (), appendTo (), antes de (), insertBefore (), después de (), InsertAfter (), envolver (), wrapAll () y wrapInner ( )

Answer 10

Después de () y InsertAfter () tanto añade un nuevo elemento, el cambio importante vendrá para encadenar

En after() está anexando el nuevo elemento después de su selector y luego, si usted está utilizando la cadena para el elemento a continuación, cualquier función que utilizó se disparará en el selector no en el elemento recién agregado, y lo contrario se realiza en insertAfter() en el cual el encadenamiento será realizado en el elemento recién añadido por ejemplo,

Después de () y InsertAfter ()

HTML

<div class="after">After Div</div>
------------------------------------------------------
<div class="insertafter">Insert after div</div>

Script

var p='<p>Lorem ipsum doner inut..</p>';
$('.after').after(p)//chaining, performed on .after div not on p
           .css('backgroundColor','pink');
           //you can chain more functions for .after here


$(p).insertAfter('.insertafter')//chaining, performed on p not on .insertafter div
    .css('backgroundColor','yellow');
    // here you can chain more functions for newly added element(p)

Ver por encima de la selector y contents están cambiando en ambas funciones. Lo mismo se aplicará en la lista de los siguientes:

1. antes () vs insertBefore ()
2. append () vs appendTo ()
3. prepend () vs Prefijopara ()
4. y después () vs InsertAfter (), obviamente.

demostración en vivo

Si desea ver tanto, a continuación, se refiere a rendimiento after() es más rápido que insertAfter() Ver post-VS InsertAfter rendimiento .

Answer 11

Una de las cosas importantes, aparte de que alguna sintaxis es pérdida de memoria y rendimiento. InsertAfter es más eficiente que la inserción cuando se tiene un montón de elementos DOM. Así que prefieren InsertAfter lugar de después.