Soy bastante hábil con la codificación, pero de vez en cuando me encuentro con código que parece hacer básicamente lo mismo. Mi pregunta principal aquí es, ¿por qué usar .append()
en lugar de .after()
o viceversa?
He estado buscando y no puedo encontrar una definición clara de las diferencias entre ambos y cuándo usarlos y cuándo no.
¿Cuáles son los beneficios de uno sobre el otro y también por qué debería usar uno en lugar del otro? ¿Puede alguien explicarme esto?
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()
pone los datos dentro de un elemento en el último índice
y
.prepend()
pone el elemento que se preanuncia en el primer índice
.
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
.append()
se ejecute se verá así:$('.a').append($('.c'));
después de la ejecución:
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>
.prepend()
se ejecute se verá así:$('.a').prepend($('.c'));
después de la ejecución:
<div class='a'> //<---you want div c to append in this
<div class='c'>c</div>
<div class='b'>b</div>
</div>
.after()
pone el elemento después del elemento
.before()
pone el elemento antes del elemento
$('.a').after($('.c'));
después de la ejecución:
<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here
$('.a').before($('.c'));
después de la ejecución:
<div class='c'>c</div> //<----this will be placed here
<div class='a'>
<div class='b'>b</div>
</div>
append()
& prepend()
son para insertar contenido dentro de un elemento (haciendo el contenido su hijo) mientras que after()
& before()
insertan contenido fuera de un elemento (haciendo el contenido su hermano).
La mejor manera es acudir a la documentación.
.append()
frente a .after()
append()
: Inserta el contenido, especificado por el parámetro, al final de cada elemento en el conjunto de elementos coincidentes.after()
: Inserta el contenido, especificado por el parámetro, después de cada elemento en el conjunto de elementos coincidentes. .prepend()
frente a .before()
prepend()
: Inserta el contenido, especificado por el parámetro, al principio de cada elemento en el conjunto de elementos coincidentes.before()
: Inserta el contenido, especificado por el parámetro, antes de cada elemento en el conjunto de elementos coincidentes.Así, append y prepend se refieren a los hijos del objeto mientras que after y before se refieren a los hermanos del objeto.