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

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);
});

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.

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

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:

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 .

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).

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.

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

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

<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>    

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.

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().