27/02/14 Añadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

www.actualidadjquery.es/2011/12/01/anadir-elementos-contenidos-con-append-y-prepend-en-jquery/ 1/4

Ajax

Formularios

Checkbox

Input

Radio

Select

Imágenes

jQuery

Menús

Buscar... Buscar

Actualidad jQuery Blog de actualidad

acerca de jQuery con tutoriales y ejemplos

Inicio

Acerca de

RSS

Añadir elementos / contenidos con append() yprepend() en jQuery

1 dic

Volvemos al trabajo,

despues de un tiempo

desaparecidos por aquí. Hoy

os vamos a enseñar a añadir

elementos o contenidos en

jQuery con la función

append() y prepend()

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

27/02/14 Añadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

www.actualidadjquery.es/2011/12/01/anadir-elementos-contenidos-con-append-y-prepend-en-jquery/ 2/4

elemento/capa que nosotros le especifiquemos. Ejemplo:

view plain copy to c lipboard print ?

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

view plain copy to c lipboard print ?

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

Entradas relacionadas

None

(Visited 11,830 times, 21 visits today)

Comentarios 0 ComentariosCategorías jQuery

Autor admin

Sin comentarios todavía

Agregar un nuevo comentario

Name (Required)

E-mail (Required)

Website

27/02/14 Añadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

www.actualidadjquery.es/2011/12/01/anadir-elementos-contenidos-con-append-y-prepend-en-jquery/ 3/4

Comentar

Recientes

fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQueryCoin Slider: Transiciones espectaculares de imágenes en jQuery

Agregar / eliminar elementos dinámicamente en un campo select con jQueryEliminar elementos / contenidos con remove() en jQuery

Añadir elementos / contenidos con append() y prepend() en jQuery

Etiquetas

addClass ajax alert animate append() checked click Coin Slider confirm eventos fadeIn fadeOut fancyBox formularios

getElementById getElementsByClassName getElementsByTagName input isNaN JavaScript jqTransform jQuery length

Lightbox menu menus mouseenter mouseleave prepend() prompt remove() removeClass select selected Shadowbox slideDown

slideUp submit

Comentarios

Jorge en Cargando contenido dinámico con la función ajax de jQuery

Diego en fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery

Edwin en jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQuery

ruso en Cargando contenido dinámico con la función ajax de jQuery

Esteban en Animación simple utilizando fadeIn y fadeOut de jQuery

Sitios de interés

Alojamiento web

Touch Gamez

Síguenos en Facebook

27/02/14 Añadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

www.actualidadjquery.es/2011/12/01/anadir-elementos-contenidos-con-append-y-prepend-en-jquery/ 4/4

Actualidad jQuery

A 132 personas les gusta Actualidad jQuery.

Me gustaMe gusta

© 2014 Actualidad jQuery. All Rights Reserved.

Carreras Virtualeswww.utelesup.com

Acaba tu Carrera Profesional en 3

años y 4 meses