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

207

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);
});
Epik
fuente
2
i nunca uso appendlos cuales (el uso de?), es decir, errores, yo uso appendToque parece alsomore correcta semánticamente sobre todo porque no es after(cadena de cadena de la cadena) - Nota: afterno es después de dentro
mikakun
Parece que lo que realmente quieres saber es por qué elegir anexar vs después para lograr el mismo resultado. Digamos que tiene <div class = 'a'> <p class = 'b'> </p> </div>. Entonces $ ('. A'). Append ('hello') tendría el mismo efecto que $ ('. B'). After ('hello'). A saber: <div class = 'a'> <p class = 'b'> </p> 'hello' </div>. En ese caso, no importa. El html resultante es el mismo, así que elija agregar o después dependiendo del selector que sea más conveniente para construir en su código.
Tgoneil

Respuestas:

448

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.


Jai
fuente
1
@joraid actualizó la respuesta según su comentario con algunos enlaces de violín js en ejecución.
Jai
1
Gran explicación, pero ¿qué pasa si quiero cargar en una vista html externa? Usando MVC así:$("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected });
Djeroen
44
@Djeroen .append()no lo cargará de esa manera. Tienes que usar .load(url, params).
Jai
1
¡Agradable! ¿Puedo preguntar también sobre la diferencia entre '$ (elemento) .append (contenido)' y '$ (contenido) .appendTo (objetivo)', y similares? (¡No quiero comenzar un nuevo hilo en esto!)
Apostolos
135

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

jQuery infografía

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:

Infografía de inserción de jQuery, más versiones invertidas de las 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 .

VSri58
fuente
2
Imagen muy fácil de entender. :)
Abdul Hameed
¡Votado! Si pregunto, ¿qué pasa con el appendTo y prependTo en la imagen? Por favor actualice.
Primero dev7
Sigo refiriéndome a tu infografía. Espero que les guste la adición de las funciones invertidas.
Bob Stein
37

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

alijsh
fuente
19

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.

Ionică Bizău
fuente
9

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

I_Debug_Everything
fuente
5

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
Code.Town
fuente
5
<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>    
Nate
fuente
3

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.

anu
fuente
3

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().

Michael Durrant
fuente