.append (), prepend (), .after () und .before ()

205

Ich bin ziemlich kompetent im Codieren, aber ab und zu stoße ich auf Code, der im Grunde das Gleiche zu tun scheint. Meine Hauptfrage hier ist, warum würden Sie .append()lieber dann .after()oder umgekehrt verwenden?

Ich habe gesucht und kann anscheinend keine klare Definition der Unterschiede zwischen den beiden finden und wann ich sie verwenden soll und wann nicht.

Was sind die Vorteile des einen gegenüber dem anderen und warum sollte ich eher das eine als das andere verwenden? Kann mir bitte jemand das erklären?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});
Epik
quelle
2
Ich benutze nie appendwelche (verwenden?) Fehler, dh ich benutze appendTo, die auch semantisch korrekt erscheinen, zumal es after(Kette Kette Kette) gibt - nb: afterist nach nicht innerhalb
Mikakun
Klingt so, als ob Sie wirklich wissen möchten, warum Sie Anhängen und Nachher wählen sollten, um das gleiche Ergebnis zu erzielen. Angenommen, Sie haben <div class = 'a'> <p class = 'b'> </ p> </ div>. Dann hätte $ ('. A'). Append ('Hallo') den gleichen Effekt wie $ ('. B'). After ('Hallo'). Nämlich: <div class = 'a'> <p class = 'b'> </ p> 'Hallo' </ div>. In diesem Fall spielt es keine Rolle. Das resultierende HTML ist das gleiche, wählen Sie also Anhängen oder danach, je nachdem, welcher Selektor am bequemsten in Ihrem Code zu erstellen ist.
Tgoneil

Antworten:

446

Sehen:


.append()Setzt Daten in ein Element um last indexund
.prepend()setzt das vorangestellte Element umfirst index


annehmen:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

Wenn .append()es ausgeführt wird, sieht es folgendermaßen aus:

$('.a').append($('.c'));

nach der Ausführung:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

Spielen Sie mit .append () in der Ausführung.


Wenn .prepend()es ausgeführt wird, sieht es folgendermaßen aus:

$('.a').prepend($('.c'));

nach der Ausführung:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

Spielen Sie bei der Ausführung mit .prepend ().


.after()setzt das Element nach dem Element
.before()setzt das Element vor das Element


mit nach:

$('.a').after($('.c'));

nach der Ausführung:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

Spielen Sie mit .after () in der Ausführung.


mit vorher:

$('.a').before($('.c'));

nach der Ausführung:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

Spielen Sie mit .before () in der Ausführung.


Jai
quelle
1
@joraid hat die Antwort gemäß Ihrem Kommentar mit einigen js-Geigenlinks in der Ausführung aktualisiert.
Jai
1
Tolle Erklärung, aber was ist, wenn ich in eine externe HTML-Ansicht laden möchte? Mit MVC wie $("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
folgt
4
@ Djeroen .append()wird es nicht so laden. Du musst benutzen .load(url, params).
Jai
1
Nett! Kann ich auch nach dem Unterschied zwischen '$ (Element) .append (Inhalt)' und '$ (Inhalt) .appendTo (Ziel)' und dergleichen fragen? (Ich möchte hier keinen neuen Thread starten!)
Apostolos
135

Dieses Bild angezeigt unten gibt ein klares Verständnis und zeigt den genauen Unterschied zwischen .append(), .prepend(), .after()und.before()

jQuery-Infografik

Sie können dies auf dem Bild sehen .append()und .prepend()die neuen Elemente als untergeordnete Elemente (braune Farbe) zum Ziel hinzufügen .

Und .after()und .before()fügt die neuen Elemente als Geschwisterelemente (schwarz gefärbt) zum Ziel.

Hier ist eine DEMO zum besseren Verständnis.


BEARBEITEN: die gespiegelten Versionen dieser Funktionen:

Infografik zum Einfügen von jQuery sowie gespiegelte Versionen der Funktionen

Verwenden dieses Codes :

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

auf dieses Ziel:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

Obwohl diese Funktionen die Parameterreihenfolge umkehren, erstellt jede dieselbe Elementverschachtelung:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

... aber sie geben ein anderes Element zurück. Dies ist wichtig für die Verkettung von Methoden .

VSri58
quelle
2
sehr leicht verständliches Bild. :)
Abdul Hameed
Upvoted! Wenn ich dann frage, was ist mit den Anhängen und Voranhängen im Bild? Bitte aktualisieren.
Brst dev7
Ich beziehe mich immer wieder auf Ihre Infografik. Ich hoffe, Ihnen gefällt das Hinzufügen der gespiegelten Funktionen.
Bob Stein
37

append()& prepend()dienen zum Einfügen von Inhalten in ein Element (wodurch der Inhalt zu seinem untergeordneten Element wird), während after()& before()Inhalte außerhalb eines Elements einfügen (um den Inhalt zu seinem Geschwister zu machen).

alijsh
quelle
19

Der beste Weg ist zur Dokumentation.

.append() vs. .after()

  • . append(): Fügen Sie den durch den Parameter angegebenen Inhalt am Ende jedes Elements in den Satz übereinstimmender Elemente ein.
  • . after(): Fügen Sie den durch den Parameter angegebenen Inhalt nach jedem Element in den Satz übereinstimmender Elemente ein.

.prepend() vs. .before()

  • prepend(): Fügen Sie den durch den Parameter angegebenen Inhalt am Anfang jedes Elements in den Satz übereinstimmender Elemente ein.
  • . before(): Fügen Sie den durch den Parameter angegebenen Inhalt vor jedem Element in die Gruppe der übereinstimmenden Elemente ein.

Anhängen und Voranstellen beziehen sich also auf das untergeordnete Objekt des Objekts, während sich nach und vor das Geschwister des Objekts bezieht.

Ionică Bizău
quelle
9

Es gibt einen grundlegenden Unterschied zwischen .append()und .after()und .prepend()und .before().

.append()Fügt das Parameterelement ganz am Ende des Tags des Auswahlelements .after()hinzu, während das Parameterelement nach dem Tag des Elements hinzugefügt wird .

Das Gegenteil ist für .prepend()und .before().

Geige

I_Debug_Alles
quelle
5

Es gibt keinen zusätzlichen Vorteil für jeden von ihnen. Es hängt ganz von Ihrem Szenario ab. Der folgende Code zeigt ihren Unterschied.

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here
Code.Town
quelle
5
<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    
Nate
quelle
3

Stellen Sie sich das DOM (HTML-Seite) als Baum rechts vor. Die HTML-Elemente sind die Knoten dieses Baums.

Der append()fügt dem Knoten, auf dem childSie ihn aufgerufen haben, einen neuen Knoten hinzu .

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

Der after()fügt dem übergeordneten Knoten des Knotens, auf dem Sie ihn aufgerufen haben, einen neuen Knoten als Geschwister oder auf derselben Ebene oder untergeordnetem Element hinzu.

anu
quelle
3

So versuchen Sie, Ihre Hauptfrage zu beantworten:

Warum sollten Sie .append () anstelle von .after () oder umgekehrt verwenden?

Wenn Sie das DOM mit jquery bearbeiten, hängen die von Ihnen verwendeten Methoden vom gewünschten Ergebnis ab. Häufig wird das Ersetzen von Inhalten verwendet.

Wenn Sie .remove()Inhalte ersetzen, möchten Sie diese durch neue Inhalte ersetzen. Wenn Sie .remove()das vorhandene Tag verwenden und dann versuchen, .append()es zu verwenden , funktioniert es nicht, da das Tag selbst entfernt wurde. Wenn Sie es verwenden .after(), wird der neue Inhalt "außerhalb" des (jetzt entfernten) Tags hinzugefügt und ist vom vorherigen nicht betroffen .remove().

Michael Durrant
quelle