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);
});
append
welche (verwenden?) Fehler, dh ich benutzeappendTo
, die auch semantisch korrekt erscheinen, zumal esafter
(Kette Kette Kette) gibt - nb:after
ist nach nicht innerhalbAntworten:
Sehen:
.append()
Setzt Daten in ein Element umlast index
und.prepend()
setzt das vorangestellte Element umfirst index
annehmen:
Wenn
.append()
es ausgeführt wird, sieht es folgendermaßen aus:nach der Ausführung:
Spielen Sie mit .append () in der Ausführung.
Wenn
.prepend()
es ausgeführt wird, sieht es folgendermaßen aus:nach der Ausführung:
Spielen Sie bei der Ausführung mit .prepend ().
.after()
setzt das Element nach dem Element.before()
setzt das Element vor das Elementmit nach:
nach der Ausführung:
Spielen Sie mit .after () in der Ausführung.
mit vorher:
nach der Ausführung:
Spielen Sie mit .before () in der Ausführung.
quelle
$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
.append()
wird es nicht so laden. Du musst benutzen.load(url, params)
.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 :
auf dieses Ziel:
Obwohl diese Funktionen die Parameterreihenfolge umkehren, erstellt jede dieselbe Elementverschachtelung:
... aber sie geben ein anderes Element zurück. Dies ist wichtig für die Verkettung von Methoden .
quelle
append()
&prepend()
dienen zum Einfügen von Inhalten in ein Element (wodurch der Inhalt zu seinem untergeordneten Element wird), währendafter()
&before()
Inhalte außerhalb eines Elements einfügen (um den Inhalt zu seinem Geschwister zu machen).quelle
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.
quelle
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
quelle
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.
quelle
quelle
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 demchild
Sie ihn aufgerufen haben, einen neuen Knoten hinzu .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.quelle
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()
.quelle