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 pergunta aqui é, por que você utilizaria .append()
ao invés de .after()
ou vice versos?
Tenho procurado e parece não conseguir encontrar uma definição clara das diferenças entre os dois e quando usá-los e quando não usá-los.
Quais são os benefícios de um sobre o outro e também por que eu usaria um em vez do outro? Alguém me pode explicar isto?
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);
});
.append()
coloca dados dentro de um elemento em last index
e
.prepend()
coloca o elemento prependente no primeiro índice
.
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
.append()
executa será parecido com isto:$('.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>
.prepend()
executa será parecido com isto:$('.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>
.after()
coloca o elemento depois do elemento
.antes()
coloca o elemento antes do elemento
$('.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
$('.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>
A melhor maneira é ir à documentação.
.append()
vs .after()
append()
: Inserir conteúdo, especificado pelo parâmetro, ao final de cada elemento no conjunto de elementos combinados.after()
: Inserir conteúdo, especificado pelo parâmetro, after cada elemento no conjunto de elementos combinados. .prepend()
vs .before()
prepend()
: Inserir conteúdo, especificado pelo parâmetro, no início de cada elemento no conjunto de elementos combinados.before()
: Inserir conteúdo, especificado pelo parâmetro, antes de cada elemento no conjunto de elementos combinados.Assim, anexar e pré-encontrar refere-se ao filho do objeto, enquanto depois e antes refere-se ao irmão do objeto.