Je suis assez compétent en matière de codage, mais de temps en temps, je tombe sur du code qui semble faire essentiellement la même chose. Ma question principale est la suivante : pourquoi utiliser .append()
plutôt que .after()
ou vice versa ?
J'ai cherché et je n'ai pas trouvé de définition claire des différences entre les deux et quand les utiliser et quand ne pas le faire.
Quels sont les avantages de l'un par rapport à l'autre et pourquoi devrais-je utiliser l'un plutôt que l'autre ? Quelqu'un peut-il m'expliquer cela ?
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()
met les données à l'intérieur d'un élément au dernier indice
et
.prepend()
place l'élément qui précède au premier indice
.
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
.append()
s'exécute, cela ressemblera à ceci :$('.a').append($('.c'));
après exécution :
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>
.prepend()
s'exécute, cela ressemblera à ceci :$('.a').prepend($('.c'));
après exécution :
<div class='a'> //<---you want div c to append in this
<div class='c'>c</div>
<div class='b'>b</div>
</div>
.after()
met l'élément après l'élément
.before()
place l'élément avant l'élément
$('.a').after($('.c'));
après l'exécution :
<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here
$('.a').before($('.c'));
après l'exécution :
<div class='c'>c</div> //<----this will be placed here
<div class='a'>
<div class='b'>b</div>
</div>
append()
& prepend()
servent à insérer du contenu à l'intérieur d'un élément (faisant du contenu son enfant) tandis que after()
& before()
insèrent du contenu à l'extérieur d'un élément (faisant du contenu son frère ou sa soeur).
Le meilleur moyen est de passer par la documentation.
.append()
vs .after()
append()
][1] : Insère le contenu, spécifié par le paramètre, à la fin de chaque élément dans l'ensemble des éléments correspondants.after()
][2] : Insère le contenu, spécifié par le paramètre, après chaque élément de l'ensemble des éléments correspondants. .prepend()
vs .before()
prepend()
][3] : Insère le contenu, spécifié par le paramètre, au début de chaque élément dans l'ensemble des éléments correspondants.before()
][4] : Insère le contenu, spécifié par le paramètre, avant chaque élément de l'ensemble des éléments correspondants.Ainsi, append et prepend font référence aux enfants de l'objet, tandis que after et before font référence aux frères et sœurs de l'objet.
[1] : http://api.jquery.com/append/ [2] : http://api.jquery.com/after/ [3] : http://api.jquery.com/prepend/ [4] : http://api.jquery.com/before/