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

207

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);
});
Epik
la source
2
je n'utilise jamais appendquels bogues (utiliser pour?) c'est-à-dire appendToque j'utilise qui semble également plus correct sémantiquement, d'autant plus qu'il y a after(chaîne chaîne chaîne) - nb: aftern'est pas après
mikakun
Cela ressemble à ce que vous voulez vraiment savoir, c'est pourquoi choisir d'ajouter vs après pour obtenir le même résultat. Supposons que vous ayez <div class = 'a'> <p class = 'b'> </p> </div>. Alors $ ('. A'). Append ('hello') aurait le même effet que $ ('. B'). After ('hello'). À savoir: <div class = 'a'> <p class = 'b'> </p> 'bonjour' </div>. Dans ce cas, cela n'a pas d'importance. Le code HTML résultant est le même, alors choisissez ajouter ou après selon le sélecteur le plus pratique à construire dans votre code.
tgoneil

Réponses:

448

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.


I have
la source
1
@joraid a mis à jour la réponse selon votre commentaire avec des liens js violon en cours d'exécution.
Jai
1
grande explication, mais que faire si je veux charger dans une vue html externe? Utiliser MVC comme ceci:$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
Djeroen
4
@Djeroen .append()ne le chargera pas de cette façon. Vous devez utiliser .load(url, params).
Jai
1
Agréable! Puis-je également poser des questions sur la différence entre «$ (élément) .append (contenu)» et «$ (contenu) .appendTo (cible)», etc.? (Je ne veux pas commencer un nouveau fil dans ça!)
Apostolos
135

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

Infographie jQuery

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:

Infographie d'insertion jQuery, ainsi que des versions inversées des 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 .

VSri58
la source
2
image très facilement compréhensible. :)
Abdul Hameed
A voté! Si je demande alors qu'en est-il de l'appendTo et du prependTo en image? Veuillez mettre à jour.
Brst dev7
Je continue de me référer à votre infographie. J'espère que vous aimez l'ajout des fonctions inversées.
Bob Stein
37

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

alijsh
la source
19

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.

Ionică Bizău
la source
9

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

I_Debug_Everything
la source
5

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
Code.Town
la source
5
<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>    
Nate
la source
3

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é.

anu
la source
3

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().

Michael Durrant
la source