jQuery: Quelle est la différence entre après () et insertAfter ()

Question

jQuery a une méthode de .after(), et également un procédé de .insertAfter().

Quelle est la différence entre eux? Je pense pouvoir utiliser .after() pour insérer des éléments après un élément sélectionné (ou éléments). Est-ce correct? Qu'est-ce .insertAfter() pour?

Answer 1

Ils sont opposés mutuels.

' après ' 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 fait 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>

Answer 2

Ils sont inverses l'une de l'autre. Comme expliqué dans la documentation de jQuery :

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

est le même que celui-ci:

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

Enfin, insertAfter renvoie tous les éléments insérés, alors que .après () retourne le contexte, il est appelé.

Answer 3

Toutes les réponses à ce jour sont claires comme de la boue ;-) (Je vais essayer de répondre à trop!)

Si vous commencez avec ce Html:

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

Après insère une nouveau contenu 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>

Par contre, InsertAfter déplace un ou plusieurs éléments qui existent déjà sur les DOM après que les éléments sélectionnés ( Vraiment, cette méthode pourrait être appelé MoveAfter ):

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

Entraînant:

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

Answer 4

(après & avant):

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

while (insertAfter & insertBefore):

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

Answer 5

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

==

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

Answer 6

Vérifiez les :

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

est le même que:

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

Answer 7

après (contenu) Renvoie: jQuery

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

insertAfter (sélecteur) Renvoie: jQuery

Introduire tous les éléments appariés après l'autre, spécifiées, ensemble d'éléments.

Answer 8

Il semble également que les attributs passage de l'élément inséré ne fonctionne pas avec « .insertAfter », mais fonctionne avec « .après »

fonctionne:

$('#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: il semble ne fonctionne pas avec ".après" non plus, mais seulement avec ".appendTo"

Answer 9

vous pouvez trouver un très très bon tutoriel comment ajouter contenu à une page en utilisant les méthodes jQuery préfixer (), Préfixepour (), append (), appendTo (), avant (), insertBefore (), après (), insertAfter (), envelopper (), wrapAll () et wrapInner ( )

Answer 10

Après () et insertafter () deux ajoute un nouvel élément, le principal changement viendra pour chaîner

Dans after() vous apposent le nouvel élément après votre sélecteur et si vous utilisez la chaîne pour l'élément alors une fonction que vous avez utilisé sera le feu sur le selector pas sur l'élément nouvellement ajouté, et le contraire se réalisée en insertAfter() dans lequel l'enchaînement sera réalisée sur l'élément nouvellement ajouté par exemple,

After () 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 la selector et contents changent dans les deux fonctions. Sera de même sur la liste des éléments suivants:

1. avant () vs insertBefore ()
2. append () vs appendTo ()
3. précédez () vs Préfixepour ()
4. et après () vs insertAfter (), évidemment.

Live Demo

Si vous voulez voir à la fois, la performance sage alors after() est plus rapide que insertAfter() Voir après-VS- insertafter performance.

Answer 11

Une des choses importantes en dehors est une syntaxe que fuite de mémoire et de performance. insertafter est plus efficace que insert lorsque vous avez des tonnes d'éléments dom. Donc, au lieu de préférer insertafter après.