.append (), prepend (),.después de () y.antes()

Question

.append (), prepend (),.después de () y.antes()

Soy bastante competente 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ías .append() en lugar de .after() o vice verses?

He estado buscando y no puedo encontrar una definición clara de las diferencias entre los dos y cuando usarlos y cuando no.

¿Cuáles son los beneficios de uno sobre el otro y también por qué usaría uno en lugar del otro?? ¿Puede alguien por favor explicar esto a ¿yo?

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

165

javascript jquery append prepend jquery-after

Author: Mohammad, 2013-02-13

Source

9 answers

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

Imágenes de jQuery

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

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

Aquí hay un DEMO para mejor comprensión.

113

Author: VSri58,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-21 12:57:59

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

33

Author: alijsh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-02 09:54:56

La mejor manera es ir a la documentación.

`.append()` vs `.after()`

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

`.prepend()` vs `.before()`

prepend(): Insertar contenido, especificado por el parámetro, al principio de cada elemento en el conjunto de elementos coincidentes.
.before(): Inserte el 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.

15

Author: Ionică Bizău,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-16 09:52:35

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

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

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

Fiddle

7

Author: I_Debug_Everything,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-08 14:00:41

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

4

Author: Nate,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-31 21:07:55

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

3

Author: Code.Town,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-13 05:20:21

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 child del nodo en el que lo llamó.

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

creates a child node <p> to <div>

El after() agrega un nuevo nodo como un hermano o en el mismo nivel o hijo al padre del nodo en el que lo llamó.

2

Author: anu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-02 09:55:22

Para tratar de responder a su pregunta principal :

Por qué usarías .append() en lugar de .¿después () o vice verses?

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

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

2

Author: Michael Durrant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-19 00:13:56

score 369 · Accepted Answer

Véase:

.append() pone datos dentro de un elemento en last index y
.prepend() pone el elemento que precede en first index

Supongamos: {[18]]}

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

Cuando .append() se ejecute se verá así: {[18]]}

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

Juguetea .append () en ejecución.

Cuando .prepend() se ejecute se verá así: {[18]]}

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

Juguetea .prepend () in ejecución.

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

Usando después de:

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

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

.append (), prepend (),.después de () y.antes()

9 answers

Véase:

Supongamos: {[18]]}
`<div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div>`

Cuando `.append()` se ejecute se verá así: {[18]]}
`$('.a').append($('.c'));`

Juguetea .append () en ejecución.

Cuando `.prepend()` se ejecute se verá así: {[18]]}
`$('.a').prepend($('.c'));`

Juguetea .prepend () in ejecución.

Usando después de:

Juguetea .after () en ejecución.

Usando antes:

Juguetea .before() en ejecución.

`.append()` vs `.after()`

`.prepend()` vs `.before()`

Para tratar de responder a su pregunta principal :

Por qué usarías .append() en lugar de .¿después () o vice verses?

.append (), prepend (),.después de () y.antes()

9 answers

Véase:

Supongamos: {[18]]} <div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div>

Cuando .append() se ejecute se verá así: {[18]]} $('.a').append($('.c'));

Juguetea .append () en ejecución.

Cuando .prepend() se ejecute se verá así: {[18]]} $('.a').prepend($('.c'));

Juguetea .prepend () in ejecución.

Usando después de:

Juguetea .after () en ejecución.

Usando antes:

Juguetea .before() en ejecución.

.append() vs .after()

.prepend() vs .before()

Para tratar de responder a su pregunta principal :

Por qué usarías .append() en lugar de .¿después () o vice verses?

Supongamos: {[18]]}
`<div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div>`

Cuando `.append()` se ejecute se verá así: {[18]]}
`$('.a').append($('.c'));`

Cuando `.prepend()` se ejecute se verá así: {[18]]}
`$('.a').prepend($('.c'));`

`.append()` vs `.after()`

`.prepend()` vs `.before()`