javascript - insertbefore - jQuery: ¿Cuál es la diferencia entre after() y insertAfter()

jquery prepend

Question

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

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

Answer 1

( después antes ):

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

while (insertarAfter & insertBefore):

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

Answer 2

Ellos son opuestos mutuos.

'' after '' inserta el argumento después del selector.

'' insertAfter '' inserta el selector después del argumento.

Aquí hay un ejemplo de lo mismo hecho 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():

<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 3

Son inversos el uno del otro. Como se explica en la documentation jQuery:

Esta:

$("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 invoca.

Answer 4

También parece que los atributos de paso del elemento insertado no funcionan con ".insertAfter", pero funcionan con ".after"

trabajos:

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

no funciona:

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

* edit: parece que no funciona con ".after" tampoco, pero solo con ".appendTo"

Answer 5

Todas las respuestas hasta ahora son claras como el barro ;-) (¡Así que voy a probarlo también!)

Si comienzas con este Html:

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

After insertar algún contenido nuevo después de las etiquetas coincidentes:

$("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 existen en el DOM después de los elementos seleccionados ( Realmente, este método podría llamarse MoveAfter ):

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

Resultando en:

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

Answer 6

Una cosa importante aparte de la sintaxis es la pérdida de memoria y el rendimiento. insertafter es más eficiente que insert cuando tienes toneladas de elementos dom. Así que prefiero insertafter en lugar de after.

Answer 7

Verifique la documentation :

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

es lo mismo que:

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

Answer 8

after (content) Devuelve: jQuery

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

insertAfter (selector) Devuelve: jQuery

Inserte todos los elementos coincidentes después de otro, especificado, conjunto de elementos.

Answer 9

Here puede encontrar un muy buen tutorial sobre cómo agregar contenido a una página utilizando los métodos jQuery prepend (), prependTo (), append (), appendTo (), before (), insertBefore (), after (), insertAfter (), wrap (), wrapAll () y wrapInner ()

Answer 10

After() y Insertafter() ambos añaden un elemento, el cambio principal vendrá para encadenar

In after() está agregando el nuevo elemento después de su selector y luego, si está utilizando la cadena para el elemento, cualquier función que utilice se activará en el selector no en el elemento recién agregado, y lo contrario se realizará en insertAfter() en que el encadenamiento realizará en el elemento recién agregado, por ejemplo,

After () e InsertAfter ()

HTML

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

GUIÓN

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 arriba, el selector y el contents están cambiando en ambas funciones. Lo mismo se aplicará en la lista de los siguientes:

1. before () versus insertBefore ()
2. append () vs appendTo ()
3. prepend () vs prependTo ()
4. y después () vs insertAfter (), obviamente.

Demo en vivo

Si desea ver ambas cosas, el rendimiento en sí, luego de que after() sea ​​más rápido que insertAfter() Vea after-vs-insertafter-performance .

Answer 11

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

==

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