javascript - before - jquery appendto

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

Question

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

He estado buscando y 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é debería usar 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);
});

Answer 1

Para tratar de responder a su pregunta principal :

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

Cuando manipulas el DOM con jquery, los métodos que usas dependen del resultado que desees y un uso frecuente es reemplazar el contenido.

Al reemplazar el contenido, quiere .remove() y reemplazarlo con contenido nuevo. Si .remove() la etiqueta existente y luego tratas de usar .append() no funcionará porque la etiqueta misma ha sido eliminada, mientras que si usas .after() , el nuevo contenido se agrega ''fuera'' ( ahora eliminado) tag y no se ve afectado por .remove() .

Answer 2

Ver :

.append() coloca los datos dentro de un elemento en el last index y
.prepend() coloca el elemento precedente al first index

suponer:

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

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

Fiddle con .append () en ejecución.

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

Violín con .antes de () en ejecución.

Answer 3

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

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

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

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

Answer 4

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

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

El viceversa es para .prepend() y .before() .

Fiddle

Answer 5

Imagine el DOM (página HTML) como un árbol derecho. Los elementos HTML son los nodos de este árbol.

El append() agrega un nuevo nodo al elemento child del nodo al que lo llamó.

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

creates a child node <p> to <div>

The after() agrega un nuevo nodo como hermano o en el mismo nivel o secundario al padre del nodo en el que lo invocó.

Answer 6

La mejor manera es ir a la documentación.

.append() vs .after()

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

.prepend() vs .before()

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

Por lo tanto, agregar y anteponer se refiere al elemento secundario del objeto mientras que antes y después se refiere al elemento secundario del objeto.

Answer 7

No hay una 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

Answer 8

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

Answer 9

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