Añadir contenido con jQuery: Funciones append y prepend

jQuery

Añadir contenido con jQuery

Este post explicará como añadir contenido después del último hijo del elemento seleccionado y al principio del elemento. Para ello se usarán las funciones append y prepend respectivamente.

Función .append()

Esta función añade HTML justo después del último hijo de un elemento elemento seleccionado. Por ejemplo, tienes un elemento div y quieres añadir contenido justo antes de su cierre de etiqueta. También, la función .append() es una buena manera de añadir un elemento al final de una lista ya sea ordenada o desordenada.

Para mostrar su uso usaré el ejemplo de los errores que he ido utilizando en previos posts de esta serie.

XHTML
1
2
3
4
5
<div id="contenedor">
  <div id="errores">
    <p>Tienes un campo incompleto.</p>
  </div>
</div>

Al escribir este código en la etiqueta <script>

JavaScript
1
2
3
$(document).ready(function(){
   $('#errores').append("<p> Ha aparecido otro error </p>");
});

El código final ha debido de quedar así.

XHTML
1
2
3
4
5
6
<div id="contenedor">
  <div id="errores">
    <p>Tienes un campo incompleto.</p>
    <p> Ha aparecido otro error </p>
  </div>
</div>

El nuevo párrafo aparece justo después del último del div errores.

Función .prepend()

Es como la función .append() solo que añade el HTML directamente después de la apertura de la etiqueta del elemento seleccionado. Basándonos en el ejemplo anterior, se podría añadir un error al inicio del div errores.

JavaScript
1
2
3
$(document).ready(function(){
   $('#errores').prepend("<p> Ha aparecido otro error </p>");
});

El resultado final del código sería el siguiente

XHTML
1
2
3
4
5
6
<div id="contenedor">
  <div id="errores">
    <p> Ha aparecido otro error </p>
    <p>Tienes un campo incompleto.</p>
  </div>
</div>

Como puedes observar, ahora el error está justo después de la apertura del div errores.

Y hasta aquí el uso de las funciones append y prepend, espero que os haya gustado. A seguir picando 🙂