La ventaja y/o utilidad de estas funciones es añadir contenidos en tiempo real, una vez que ya se ha cargado completamente nuestro sitio web.

La función append() añade el contenido al final del elemento/capa que nosotros le especifiquemos.

En cambio la función prepend() funciona exactamente igual, pero el contenido se añade al principio del elemento/capa que nosotros le especifiquemos. Ejemplo:

$('.capa1').append("Actualidad jQuery");

En el ejemplo, añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", al final.

Al igual que hemos añadido un texto, podríamos añadir código HTML, una imagen, etc.

Y la función prepend() funcionaría igual, como vemos en el ejemplo:

$('.capa1').prepend("Actualidad jQuery");

Añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", pero al principio.

Para terminar de entenderlo mejor, aquí tenéis varios ejemplos interactivos con las 2 funciones.

• Ejemplo