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

Sono abbastanza abile con la codifica, ma di tanto in tanto mi imbatto in codice che sembra fare sostanzialmente la stessa cosa. La mia domanda principale qui è, perché dovresti usare .append()piuttosto .after()o viceversa?

Ho cercato e non riesco a trovare una chiara definizione delle differenze tra i due e quando usarli e quando non farlo.

Quali sono i vantaggi di uno rispetto all'altro e anche perché dovrei usare uno piuttosto che l'altro ?? Qualcuno può spiegarmelo?

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

Vedere:

.append()inserisce i dati all'interno di un elemento last indexe
.prepend()inserisce l' elemento prependente infirst index

supponiamo:

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

quando .append()viene eseguito sarà simile al seguente:

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

dopo l'esecuzione:

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

Fiddle con .append () in esecuzione.

quando .prepend()viene eseguito sarà simile al seguente:

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

dopo l'esecuzione:

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

Fiddle con .prepend () in esecuzione.

.after()mette l'elemento dopo l'elemento
.before()mette l'elemento prima dell'elemento

usando dopo:

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

dopo l'esecuzione:

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

Fiddle con .after () in esecuzione.

utilizzando prima:

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

dopo l'esecuzione:

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

Fiddle con .before () in esecuzione.

L'immagine visualizzata sotto dà una comprensione chiara e mostra la differenza esatta tra .append(), .prepend(), .after()e.before()

Puoi vedere dall'immagine che .append()e .prepend()aggiungere i nuovi elementi come elementi figlio (di colore marrone) al bersaglio.

E .after()e .before()aggiunge i nuovi elementi come di pari livello elementi (di colore nero) al bersaglio.

Ecco una DEMO per una migliore comprensione.

EDIT: le versioni capovolte di quelle funzioni:

Utilizzando questo codice :

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

su questo obiettivo:

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

Quindi, sebbene queste funzioni capovolgano l'ordine dei parametri, ognuna crea lo stesso annidamento degli elementi:

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

... ma restituiscono un elemento diverso. Questo è importante per il concatenamento dei metodi .

append()e prepend()sono per l'inserimento di contenuti all'interno di un elemento (rendendo il contenuto suo figlio) mentre after()e l' before()inserimento di contenuti all'esterno di un elemento (rendendo il contenuto suo fratello).

Il modo migliore è andare alla documentazione.

.append() vs .after()

• . append(): Inserire il contenuto, specificato dal parametro, alla fine di ogni elemento nel set di elementi corrispondenti.
• . after(): Inserisci il contenuto, specificato dal parametro, dopo ogni elemento nel set di elementi corrispondenti.

.prepend() vs .before()

• prepend(): Inserire il contenuto, specificato dal parametro, all'inizio di ogni elemento nel set di elementi corrispondenti.
• . before(): Inserire il contenuto, specificato dal parametro, prima di ogni elemento nell'insieme di elementi corrispondenti.

Quindi, aggiungere e anteporre si riferisce al figlio dell'oggetto mentre dopo e prima si riferisce al fratello dell'oggetto.

C'è una differenza di base tra .append()e .after()e .prepend()e .before().

.append()aggiunge l'elemento del parametro all'interno del tag dell'elemento selettore proprio alla fine, mentre .after()aggiunge l'elemento del parametro dopo il tag dell'elemento .

Il viceversa è per .prepend()e .before().

Violino

Non vi è alcun vantaggio aggiuntivo per ciascuno di essi. Dipende totalmente dal tuo scenario. Il codice seguente mostra la loro differenza.

    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>    

Immagina il DOM (pagina HTML) come un albero a destra. Gli elementi HTML sono i nodi di questo albero.

La append()aggiunge un nuovo nodo al childdel nodo chiamato su.

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

creates a child node <p> to <div>

La after()aggiunge un nuovo nodo come un fratello o allo stesso livello o un bambino al genitore del nodo chiamato su.

Per provare a rispondere alla domanda principale :

perché dovresti usare .append () anziché .after () o viceversa?

Quando stai manipolando il DOM con jquery, i metodi che usi dipendono dal risultato che desideri e un uso frequente è quello di sostituire il contenuto.

Nel sostituire il contenuto si desidera .remove()il contenuto e sostituirlo con nuovo contenuto. Se si utilizza .remove()il tag esistente e si tenta di utilizzarlo .append(), non funzionerà perché il tag stesso è stato rimosso, mentre se si utilizza .after(), il nuovo contenuto viene aggiunto "all'esterno" del tag (ora rimosso) e non è influenzato dal precedente .remove().