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

Je suis assez compétent avec le codage, mais de temps en temps je rencontre du code qui semble faire essentiellement la même chose. Ma principale question ici est, pourquoi utiliseriez-vous .append()plutôt des .after()versets ou vice versa?

J'ai cherché et n'arrive pas à trouver une définition claire des différences entre les deux et quand les utiliser et quand ne pas les utiliser.

Quels sont les avantages de l'un par rapport à l'autre et aussi pourquoi devrais-je utiliser l'un plutôt que l'autre ?? Quelqu'un pourrait-il me l'expliquer?

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

Voir:

.append()met les données à l'intérieur d'un élément à last indexet
.prepend()met l'elem en attente àfirst index

supposer:

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

lors de l' .append()exécution, 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>

Jouez avec .append () en cours d'exécution.

lors de l' .prepend()exécution, 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>

Jouez avec .prepend () en cours d'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 exécution:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

Jouez avec .after () en cours d'exécution.

en utilisant avant:

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

après exécution:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

Jouez avec .before () en cours d'exécution.

Cette image affichée ci - dessous donne une compréhension claire et montre la différence exacte entre .append(), .prepend(), .after()et.before()

Vous pouvez voir sur l'image cela .append()et .prepend()ajouter les nouveaux éléments comme éléments enfants (de couleur marron) à la cible.

Et .after()et .before()ajoute les nouveaux éléments comme éléments frères (de couleur noire) à la cible.

Voici une DÉMO pour une meilleure compréhension.

EDIT: les versions inversées de ces fonctions:

En utilisant ce code :

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

sur cet objectif:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

Ainsi, bien que ces fonctions inversent l'ordre des paramètres, chacune crée la même imbrication d'éléments:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

... mais ils renvoient un élément différent. Cela est important pour le chaînage des méthodes .

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

La meilleure façon est d'aller à la documentation.

.append() contre .after()

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

.prepend() contre .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 correspondants.
• . before(): Insérer du contenu, spécifié par le paramètre, avant chaque élément dans l'ensemble des éléments correspondants.

Ainsi, append et prepend se réfèrent à l'enfant de l'objet alors qu'avant et avant se réfèrent à la fratrie de l'objet.

Il existe 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 de sélection à la toute fin tandis que le .after()ajoute l'élément de paramètre après la balise de l'élément .

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

Violon

Il n'y a aucun avantage supplémentaire pour chacun d'eux. Cela dépend totalement de votre scénario. Le code ci-dessous montre leur différence.

    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>    

Imaginez le DOM (page HTML) comme une arborescence à droite. Les éléments HTML sont les nœuds de cet arbre.

Le append()ajoute un nouveau nœud au nœud childauquel vous l'avez appelé.

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

Le after()ajoute un nouveau nœud en tant que frère ou au même niveau ou enfant au parent du nœud sur lequel vous l'avez appelé.

Pour essayer de répondre à votre principale question :

Pourquoi utiliseriez-vous .append () plutôt que .after () ou vice versa?

Lorsque vous manipulez le DOM avec jquery, les méthodes que vous utilisez dépendent du résultat souhaité et une utilisation fréquente consiste à remplacer le contenu.

En remplaçant le contenu que vous voulez au .remove()contenu et remplacez-le par un nouveau contenu. Si vous .remove()utilisez la balise existante puis essayez de l'utiliser, .append()cela ne fonctionnera pas car la balise elle-même a été supprimée, tandis que si vous utilisez .after(), le nouveau contenu est ajouté `` en dehors '' de la balise (maintenant supprimée) et n'est pas affecté par la précédente. .remove().