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

Eu sou bastante proficiente em codificação, mas de vez em quando me deparo com códigos que parecem fazer basicamente a mesma coisa. Minha principal questão aqui é, por que você usar .append()em vez .after()ou vice versos?

Eu tenho procurado e não consigo encontrar uma definição clara das diferenças entre os dois e quando usá-los e quando não.

Quais são os benefícios de um sobre o outro e também por que eu usaria um e não o outro? Alguém pode explicar isso para mim?

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

Vejo:

.append()coloca os dados dentro de um elemento em last indexe
.prepend()coloca o elem precedente emfirst index

suponha:

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

quando .append()executado, ficará assim:

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

após a execução:

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

Mexa com .append () em execução.

quando .prepend()executado, ficará assim:

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

após a execução:

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

Brinque com .prepend () em execução.

.after()coloca o elemento após o elemento
.before()coloca o elemento antes do elemento

usando depois de:

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

após a execução:

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

Mexa com .after () em execução.

usando antes:

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

após a execução:

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

Brinque com .before () em execução.

Esta imagem exibida abaixo dá uma compreensão clara e mostra a diferença exata entre .append(), .prepend(), .after()e.before()

Você pode ver na imagem isso .append()e .prepend()adiciona os novos elementos como elementos filho (cor marrom) ao destino.

E .after()e .before()adiciona os novos elementos como irmãos elementos (cor preta) para o alvo.

Aqui está uma demonstração para melhor compreensão.

EDIT: as versões invertidas dessas funções:

Usando este código :

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

neste destino:

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

Portanto, embora essas funções alterem a ordem dos parâmetros, cada uma cria o mesmo aninhamento de elemento:

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

... mas eles retornam um elemento diferente. Isso é importante para o encadeamento de métodos .

append()& prepend()são para inserir conteúdo dentro de um elemento (tornando o conteúdo seu filho) enquanto after()& before()inserem conteúdo fora de um elemento (tornando o conteúdo seu irmão).

A melhor maneira é ir para a documentação.

.append() vs .after()

• . append(): Insira o conteúdo especificado pelo parâmetro no final de cada elemento no conjunto de elementos correspondentes.
• . after(): Insira o conteúdo especificado pelo parâmetro após cada elemento no conjunto de elementos correspondentes.

.prepend() vs .before()

• prepend(): Insira o conteúdo especificado pelo parâmetro no início de cada elemento no conjunto de elementos correspondentes.
• . before(): Insira o conteúdo especificado pelo parâmetro antes de cada elemento no conjunto de elementos correspondentes.

Portanto, acrescentar e acrescentar refere-se ao filho do objeto, enquanto depois e antes se referem ao irmão do objeto.

Há uma diferença básica entre .append()e .after()e .prepend()e .before().

.append()adiciona o elemento de parâmetro dentro da tag do elemento seletor no final, enquanto .after()adiciona o elemento de parâmetro após a tag do elemento .

O vice-versa é para .prepend()e .before().

Violino

Não há vantagem extra para cada um deles. Depende totalmente do seu cenário. O código abaixo mostra a diferença.

    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>    

Imagine o DOM (página HTML) como uma árvore à direita. Os elementos HTML são os nós desta árvore.

Ele append()adiciona um novo nó ao childnó em que você o chamou.

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

creates a child node <p> to <div>

Ele after()adiciona um novo nó como irmão ou no mesmo nível ou filho ao pai do nó em que você o chamou.

Para tentar responder à sua pergunta principal :

porque que você usaria .append () em vez de .after () ou vice-versos?

Quando você está manipulando o DOM com jquery, os métodos usados ​​dependem do resultado desejado e um uso frequente é substituir o conteúdo.

Ao substituir o conteúdo que você deseja, .remove()substitua-o por novo. Se você .remove()usar a tag existente e tentar usá- .append()la, não funcionará porque a própria tag foi removida. Se você usar .after(), o novo conteúdo será adicionado 'fora' da tag (agora removida) e não será afetado pela anterior. .remove().