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

Question

Je suis assez compétent en matière de codage, mais de temps en temps, je tombe sur un code qui semble faire essentiellement la même chose. Ma principale question est la suivante : pourquoi utiliser .append() plutôt que .after() ou vice versa ?

J'ai cherché et je n'ai pas réussi à trouver une définition claire des différences entre les deux et à savoir 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);
});

Answer 1

Voir :

---

.append() met les données à l'intérieur d'un élément à last index et
.prepend() met l'élément précedent à first index

---

supposer :

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

quand .append() s'exécute, il ressemblera à ceci :

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

après l'exécution :

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

---

Jouez avec .append() dans l'exécution.

---

quand .prepend() s'exécute, il ressemblera à ceci :

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

après l'exécution :

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

---

Jouez avec .prepend() dans l'exécution.

---

.after() met l'élément après l'élément
.before() met l'élément avant l'élément

---

en utilisant après :

$('.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

---

Jouez avec .after() dans l'exécution.

---

utilisé auparavant :

$('.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>

---

Jouez avec .before() dans l'exécution.

---

Answer 2

append() & prepend() servent à insérer du contenu à l'intérieur d'un élément (faisant du contenu son enfant) tandis que after() & before() insérer du contenu à l'extérieur d'un élément (en faisant du contenu son frère ou sa sœur).

Answer 3

Le meilleur moyen est de passer par la documentation.

.append() vs .after()

• . append() : Insérer le contenu, spécifié par le paramètre, jusqu'à la fin de chaque élément dans l'ensemble des éléments appariés.
• . after() : Insérer le contenu, spécifié par le paramètre, après chaque élément de l'ensemble des éléments appariés.

.prepend() vs .before()

• prepend() : Insérer le contenu, spécifié par le paramètre, au début de chaque élément dans l'ensemble des éléments appariés.
• . before() : nsert le contenu, spécifié par le paramètre, avant chaque élément de l'ensemble des éléments appariés.

Answer 4

Il y a une différence fondamentale entre .append() et .after() et .prepend() et .before() .

.append() ajoute l'élément de paramètre à l'intérieur de la balise de l'élément sélecteur à la toute fin alors que le .after() ajoute l'élément de paramètre après la balise de l'élément .

L'inverse est vrai pour .prepend() et .before() .

Violon

Answer 5

// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");