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

Soy bastante competente con la codificación, pero de vez en cuando me encuentro con un código que parece hacer básicamente lo mismo. Mi pregunta principal aquí es, ¿por qué usarías en .append()lugar de .after()versos o viceversa?

He estado buscando y parece que no puedo encontrar una definición clara de las diferencias entre los dos y cuándo usarlos y cuándo no.

¿Cuáles son los beneficios de uno sobre el otro y también por qué usaría uno en lugar del otro? ¿Alguien puede 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);
});

Ver:

.append()pone datos dentro de un elemento en last indexy
.prepend()coloca el elemento anterior enfirst index

suponer:

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

cuando se .append()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>

Violín con .append () en ejecución.

cuando se .prepend()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>

Violín con .prepend () en ejecución.

.after()pone el elemento después del elemento
.before()pone el elemento antes del elemento

usando después:

$('.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

Violín con .after () en ejecución.

usando antes:

$('.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>

Juega con .before () en ejecución.

Esta imagen muestra a continuación proporciona una comprensión clara y muestra la diferencia exacta entre .append(), .prepend(), .after()y.before()

Puede ver en la imagen eso .append()y .prepend()agrega los nuevos elementos como elementos secundarios (color marrón) al objetivo.

Y .after()y .before()añade los nuevos elementos como hermanos elementos (de color negro) al objetivo.

Aquí hay una DEMO para una mejor comprensión.

EDITAR: las versiones invertidas de esas funciones:

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

en este objetivo:

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

Entonces, aunque estas funciones cambian el orden de los parámetros, cada una crea el mismo elemento de anidación:

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

... pero devuelven un elemento diferente. Esto es importante para el método de encadenamiento .

append()& prepend()son para insertar contenido dentro de un elemento (hacer que el contenido sea secundario) mientras que after()& before()insertar contenido fuera de un elemento (hacer que el contenido sea hermano).

La mejor manera es ir a la documentación.

.append() vs .after()

• . append(): Insertar contenido, especificado por el parámetro, al final de cada elemento en el conjunto de elementos coincidentes.
• . after(): Insertar contenido, especificado por el parámetro, después cada elemento en el conjunto de elementos coincidentes.

.prepend() vs .before()

• prepend(): Insertar contenido, especificado por el parámetro, al comienzo de cada elemento en el conjunto de elementos coincidentes.
• . before(): Inserte contenido, especificado por el parámetro, antes de cada elemento en el conjunto de elementos coincidentes.

Entonces, anexar y anteponer se refiere al hijo del objeto, mientras que después y antes se refiere al hermano del objeto.

Hay una diferencia básica entre .append()y .after()y .prepend()y.before() .

.append()agrega el elemento de parámetro dentro de la etiqueta del elemento selector al final, mientras que .after()agrega el elemento de parámetro después de la etiqueta del elemento .

Lo contrario es para .prepend()y.before() .

Violín

No hay ventaja adicional para cada uno de ellos. Depende totalmente de tu escenario. El siguiente código muestra su diferencia.

    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 el DOM (página HTML) como un árbol a la derecha. Los elementos HTML son los nodos de este árbol.

El append()añade un nuevo nodo a la childdel nodo que llamó a encenderlo.

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

creates a child node <p> to <div>

El after()añade un nuevo nodo como un hermano o al mismo nivel o niño al padre del nodo que llamó a encenderlo.

Para intentar responder a su pregunta principal :

¿por qué usarías .append () en lugar de .after () o viceversa?

Cuando está manipulando el DOM con jquery, los métodos que usa dependen del resultado que desea y un uso frecuente es reemplazar el contenido.

Al reemplazar el contenido, desea .remove()el contenido y reemplazarlo con contenido nuevo. Si .remove()usa la etiqueta existente y luego intenta usarla .append(), no funcionará porque la etiqueta misma se ha eliminado, mientras que si la usa .after(), el nuevo contenido se agrega 'fuera' de la etiqueta (ahora eliminada) y no se ve afectado por el anterior. .remove().