jQuery: Qual è la differenza tra il dopo () e InsertAfter ()

Question

jQuery ha un metodo .after(), e anche un metodo .insertAfter().

Qual è la differenza tra loro? Credo di poter utilizzare .after() per inserire elementi dopo un elemento selezionato (o elementi). È giusto? Cosa c'è .insertAfter() per?

Answer 1

Sono opposti reciproci.

' dopo ' inserisce l'argomento dopo il selettore.

' InsertAfter ' inserisce il selettore dopo l'argomento.

Ecco un esempio della stessa cosa fatta 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>

dopo ():

<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

Sono inverse l'una dell'altra. Come spiegato nella documentazione jQuery :

Questa:

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

E 'lo stesso di questo:

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

E, infine, InsertAfter restituisce tutti gli elementi inseriti, mentre .after () restituirà il contesto è chiamato.

Answer 3

Tutte le risposte finora sono chiare come il fango ;-) (Così mi prendo una pugnalata a esso troppo!)

Se si inizia con questo Html:

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

Dopo inserisce un po ' nuovo contenuto dopo i tag corrispondenti:

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

Il risultato finale è:

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

D'altra parte, InsertAfter si muove uno o più elementi già esistenti sul DOM dopo gli elementi selezionati ( in realtà, questo metodo potrebbe essere chiamato MoveAfter ):

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

Con conseguente:

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

Answer 4

(dopo e prima):

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

mentre (InsertAfter & insertBefore):

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

Answer 5

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

==

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

Answer 6

:

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

è lo stesso:

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

Answer 7

dopo (tenore) Restituisce: jQuery

Inserisci contenuto dopo ciascuno degli elementi corrispondenti.

InsertAfter (selettore) Restituisce: jQuery

Inserire tutti gli elementi abbinati dopo l'altro, specificate, insieme di elementi.

Answer 8

Sembra inoltre che il passaggio attributi dell'elemento inserito non funziona con ".insertAfter", ma lavora con ".Dopo"

funziona:

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

non funziona:

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

* Edit: sembra che non funziona con ".after" né, ma solo con ".appendTo"

Answer 9

qui è possibile trovare un molto molto buon tutorial su come aggiungere contenuto a una pagina utilizzando i metodi prepend jQuery (), prependTo (), aggiungere (), appendTo (), prima (), insertBefore (), dopo (), InsertAfter (), avvolgere (), wrapAll () e wrapInner ( )

Answer 10

Dopo () e InsertAfter () sia aggiunge un elemento, il cambiamento verrà per concatenamento

In after() si sta aggiungendo il nuovo elemento dopo la vostra selezione e quindi se si utilizza la catena per l'elemento allora ogni funzione è stato utilizzato sarà sparare sulla selector non sull'elemento appena aggiunto, e il contrario sarà eseguita in insertAfter() in cui il concatenamento viene eseguita sull'elemento appena aggiunta per esempio,

Dopo () e 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)

Vedi sopra la selector e contents stanno cambiando in entrambe le funzioni. Lo stesso vale nella lista dei seguenti:

1. prima () vs insertBefore ()
2. append () vs appendTo ()
3. prepend () vs prependTo ()
4. e dopo () vs InsertAfter (), ovviamente.

Live Demo

Se volete vedere entrambi, prestazioni saggio allora after() è più veloce di insertAfter() Vedere dopo-VS- InsertAfter prestazioni .

Answer 11

Un cose importanti a parte un po 'di sintassi è che perdita di memoria e prestazioni. InsertAfter è più efficiente di inserimento quando si dispone di tonnellate di elementi DOM. Così preferiscono InsertAfter anziché dopo.