27/02/14

Aadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

Ajax Formularios Checkbox Input Radio Select Imgenes jQuery Mens

Buscar... Buscar

Actualidad jQuery Blog de actualidad acerca de jQuery con tutoriales y ejemplos Inicio Acerca de RSS

Aadir elementos / contenidos con append() y prepend() en jQuery

1 dic

Volvemos al trabajo, despues de un tiempo desaparecidos por aqu. Hoy os vamos a ensear a aadir elementos o contenidos en jQuery con la funcin append() y prepend() La ventaja y/o utilidad de estas funciones es aadir contenidos en tiempo real, una vez que ya se ha cargado completamente nuestro sitio web. La funcin append() aade el contenido al final del elemento/capa que nosotros le especifiquemos. En cambio la funcin prepend() funciona exactamente igual, pero el contenido se aade al principio del
www.actualidadjquery.es/2011/12/01/anadir-elementos-contenidos-con-append-y-prepend-en-jquery/ 1/4

27/02/14

Aadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

elemento/capa que nosotros le especifiquemos. Ejemplo:

view plain c opy to c lipboard print ?

0 1 .

$ ( ' . c a p a 1 ' ) . a p p e n d ( " A c t u a l i d a dj Q u e r y " ) ;

En el ejemplo, aadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", al final. Al igual que hemos aadido un texto, podramos aadir cdigo HTML, una imagen, etc. Y la funcin prepend() funcionara igual, como vemos en el ejemplo:
view plain c opy to c lipboard print ?

0 1 .

$ ( ' . c a p a 1 ' ) . p r e p e n d ( " A c t u a l i d a dj Q u e r y " ) ;

Aadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", pero al principio. Para terminar de entenderlo mejor, aqu tenis varios ejemplos interactivos con las 2 funciones. Ejemplo

Entradas relacionadas
None (Visited 11,830 times, 21 visits today) Comentarios 0 Comentarios Categoras jQuery Autor admin Sin comentarios todava

Agregar un nuevo comentario

Name (Required) E-mail (Required) Website

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

2/4

27/02/14

Aadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

Comentar

Recientes
fancyBox: Abrir imgenes, pginas web y videos en ventanas tipo Popup con jQuery Coin Slider: Transiciones espectaculares de imgenes en jQuery Agregar / eliminar elementos dinmicamente en un campo select con jQuery Eliminar elementos / contenidos con remove() en jQuery Aadir elementos / contenidos con append() y prepend() en jQuery

Etiquetas
addClass ajax alert animate append()

checked click Coin Slider

confirm eventos

fadeIn fadeOut fancyBox

formularios
Shadowbox slideDown

getElementById getElementsByClassName getElementsByT agName

input isNaN JavaScript jqT ransform

jQuery length

Lightbox menu menus mouseenter mouseleave prepend() prompt

slideUp

remove() removeClass select selected

submit

Comentarios
Jorge en Cargando contenido dinmico con la funcin ajax de jQuery Diego en fancyBox: Abrir imgenes, pginas 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 dinmico con la funcin ajax de jQuery Esteban en Animacin simple utilizando fadeIn y fadeOut de jQuery

Sitios de inters
Alojamiento web Touch Gamez

Sguenos en Facebook

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

3/4

27/02/14

Aadir elementos / contenidos con append() y prepend() en jQuery | Actualidad jQuery

Actualidad jQuery
Me gusta

A 132 personas les gusta Actualidad jQuery.

Carreras Virtuales
www.utelesup.com Acaba tu Carrera Profesional en 3 aos y 4 meses

2014 Actualidad jQuery. All Rights Reserved.

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

4/4