JQuery: Was ist der Unterschied zwischen After () und InsertAfter ()

Question

JQuery hat eine .after() Methode und auch eine .insertAfter() Methode.

Was ist der Unterschied zwischen ihnen? Ich denke, ich kann verwenden .after() Elemente nach einem ausgewählten Element (oder Elementen) einfügen. Ist das richtig? Was ist .insertAfter() zum?

Answer 1

Sie sind gegenseitige Gegensätze.

'nach'Fügt das Argument nach dem Selektor ein.

'InsertAfter'Fügt den Selektor nach dem Argument ein.

Hier ist ein Beispiel für das gleiche, was mit:

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>

nach():

<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

Sie sind Inversen voneinander. Wie im jQuery erklärt Dokumentation:

Dies:

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

Ist dasselbe wie folgt:

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

Und schließlich gibt InsertAfter alle eingefügten Elemente zurück, während .After () den Kontext zurückgibt, den er aufgerufen wird.

Answer 3

Alle bisherigen Antworten sind klar wie Schlamm ;-) (Also werde ich auch ein Stich darüber stechen!)

Wenn Sie mit dieser HTML beginnen:

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

Nach fügt einige ein Neu Inhalt nach den passenden Tags:

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

Das Endergebnis ist:

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

Auf der anderen Seite, InsertAfter bewegt ein oder mehrere Elemente die bereits auf dem Dom existieren Nach den ausgewählten Elementen (Wirklich, diese Methode könnte genannt werden Beweglich):

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

Ergebend:

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

Answer 4

( nachher vorher ):

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

while (InsertAfter & Insertvore):

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

Answer 5

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

==

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

Answer 6

Überprüf den Dokumentation:

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

ist das gleiche wie:

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

Answer 7

Nach (Inhalt) kehrt zurück: jQuery

Fügen Sie den Inhalt nach jedem der übereinstimmenden Elemente ein.

InsertAfter (Selector) Rücksendungen: jQuery

Fügen Sie alle übereinstimmenden Elemente nach dem anderen angegebenen Elemente ein.

Answer 8

Es scheint auch, dass das Übergeben von Attributen des eingefügten Elements nicht mit ".insertafter" funktioniert, aber mit ".Fter" funktioniert

Werke:

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

funktioniert nicht:

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

*edit: scheint nicht mit "nach" zu ".

Answer 9

Hier Sie finden ein sehr sehr gutes Tutorial für das Hinzufügen von Inhalten zu einer Seite mit den jQuery -Methoden prepend (), prependTo (), append (), appendTo () vor (), InsertBefore (), nach (), InsertAf () ), Wrap (), Wrapall () und Wrapeinner ())

Answer 10

Nach() und InsertAfter () Beide wenden ein Element an, die Hauptänderung wird zum Ketten kommen

Im after() Sie fügen das neue Element nach Ihrem Selektor hinzu. Wenn Sie dann die Kette für das Element verwenden, wird jede Funktion, die Sie verwendet haben selector nicht auf dem neu hinzugefügten Element und das Gegenteil in der durchgeführten Ausführung in insertAfter() in dem die Verkettung zum Beispiel auf dem neu hinzugefügten Element durchgeführt wird,

Nach() und InsertAfter ()

Html

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

SKRIPT

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)

Siehe über dem selector und contents ändern sich in beiden Funktionen. Gleiches gilt für die Liste der folgenden:

1. vor () vs InsertBefore ()
2. append () vs appendTo ()
3. prepend () vs prependTo ()
4. und nach () vs InsertAfter () natürlich.

Live -Demo

Wenn Sie beides sehen möchten, leistungsfähig, dann after() ist schneller als insertAfter() Sehen Nach-VS-Insert-nach-Performance.

Answer 11

Ein wichtiges Syntax ist das Speicherleck und die Leistung. InsertAfter ist effizienter als ein Insert, wenn Sie Tonnen von DOM -Elementen haben. Bevorzugen Sie InsertAfter statt nach.