web-dev-qa-db-fra.com

jQuery: Quelle est la différence entre after () et insertAfter ()

jQuery a une méthode .after(), ainsi qu'une méthode .insertAfter(). 

Quelle est la différence entre eux? Je pense que je peux utiliser .after() pour insérer des éléments après un élément sélectionné (ou des éléments). Est-ce correct? A quoi sert .insertAfter()?

javascriptjqueryinsertafterjquery-after
44
Cheeso

Ils sont des contraires mutuels.

' after ' insère l'argument après le sélecteur.

' insertAfter ' insère le sélecteur après l'argument. 

Voici un exemple de la même chose avec:

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>

aprè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>
69
graphicdivine

Ils sont inverses les uns des autres. Comme expliqué dans jQuery documentation :

Ce:

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

Est-ce la même chose que ceci:

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

Enfin, insertAfter renvoie tous les éléments insérés, alors que .after () renvoie le contexte sur lequel il est appelé.

23
Chris Clark

Jusqu'à présent, toutes les réponses sont claires comme de la boue ;-) (je vais donc essayer aussi!)

Si vous commencez avec ce code HTML:

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

Aprèsinsère du contenu nouveau après les balises correspondantes:

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

Le résultat final est:

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

D'autre part,InsertAfterdéplace un ou plusieurs éléments qui existent déjà sur le DOM après les éléments sélectionnés (vraiment, cette méthode pourrait s'appeler MoveAfter):

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

Résultant en:

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

( après avant ): 

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

while (insertAfter & insertBefore): 

$('new_content').insertAfter('selector');
$('new_content').insertBefore('selector');
12
Hazem_M
$("p").insertAfter("#foo");

==

$("#foo").after("p")
5
Svetlozar Angelov

Vérifiez la documentation :

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

est le même que:

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

after (content) renvoie: jQuery

Insérer du contenu après chacun des éléments correspondants.

insertAfter (sélecteur) Retourne: jQuery

Insérer tous les éléments correspondants après un autre ensemble d'éléments spécifié.

1
just somebody

Ici vous pouvez trouver un très bon tutoriel expliquant comment ajouter du contenu à une page à l’aide des méthodes jQuery prepend (), prependTo (), append (), appendTo (), before (), insertBefore (), after (), insertAfter (), wrap (), wrapAll () et wrapInner ()

0
warmth

Il semble également que le passage des attributs de l'élément inséré ne fonctionne pas avec ".insertAfter", mais avec ".after"

travaux:

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

ne fonctionne pas:

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

* edit: semble ne pas fonctionner avec ".after" non plus, mais uniquement avec ".appendTo"

0
bogdan

Après () et Insertafter () les deux ajoutent un élément, le changement majeur viendra pour l'enchaînement

Dans after(), vous ajoutez le nouvel élément après votre sélecteur, puis si vous utilisez la chaîne pour l'élément, toutes les fonctions que vous avez utilisées seront déclenchées sur la selector et non sur le nouvel élément ajouté, et l'inverse sera exécuté dans insertAfter() dans lequel le chaînage sera effectué sur le nouvel élément ajouté, par exemple,

Après () et 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)

Voir ci-dessus selector et contents changent dans les deux fonctions. La même chose s'appliquera sur la liste des éléments suivants:

  1. before () vs insertBefore ()
  2. append () vs appendTo ()
  3. prepend () vs prependTo ()
  4. et après () vs insertAfter (), évidemment.

Démo en direct

Si vous voulez voir les deux, en termes de performances, alors after() est plus rapide que insertAfter() Voir after-vs-insertafter-performance .

0
Rohan Kumar

Une chose importante à part la syntaxe est que la fuite de mémoire et les performances. Insertafter est plus efficace que insert lorsque vous avez des tonnes d’éléments dom. Donc, préférez insertafter au lieu d’après.

0
sumit sharma