Ich bin ziemlich geübt in der Programmierung, aber hin und wieder stoße ich auf Code, der im Grunde das Gleiche zu tun scheint. Meine Hauptfrage hier ist, warum würden Sie .append()
und nicht .after()
oder umgekehrt verwenden?
Ich habe nachgeforscht und kann anscheinend keine klare Definition der Unterschiede zwischen den beiden finden und wann man sie verwenden sollte und wann nicht.
Was sind die Vorteile des einen gegenüber dem anderen und warum sollte ich das eine und nicht das andere verwenden? Kann mir das bitte jemand 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()
setzt Daten innerhalb eines Elements an letzten Index
und
.prepend()
setzt das vorangestellte Element an ersten Index
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
.append()
ausgeführt wird, sieht es wie folgt 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>
.prepend()
ausgeführt wird, sieht es wie folgt 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>
.after()
setzt das Element hinter das Element
.before()
setzt das Element vor das Element
$('.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
$('.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>
Mit append()
& prepend()
werden Inhalte innerhalb eines Elements eingefügt (der Inhalt wird zu seinem Kind), während after()
& before()
Inhalte außerhalb eines Elements einfügen (der Inhalt wird zu seinem Geschwister).
Der beste Weg ist die Dokumentation.
.append()
vs .after()
append()
: Fügt den Inhalt, der durch den Parameter angegeben ist, am Ende jedes Elements in der Menge der übereinstimmenden Elemente ein.after()
: Fügt den durch den Parameter angegebenen Inhalt nach jedem Element in der Menge der übereinstimmenden Elemente ein. .prepend()
vs .before()
before()
: Fügt den durch den Parameter angegebenen Inhalt vor jedem Element in der Menge der übereinstimmenden Elemente ein.append und prepend beziehen sich also auf das Kind des Objekts, während after und before sich auf die Geschwister des Objekts beziehen.