Seleccionar página

Con este artículo empezamos una serie de nuevos artículos que intentarán resolver algunos de los temas por los que llegan visitas a esta web buscando por palabras claves detectadas con las herramientas de Google, tengo pendiente otro artículo al respecto de estas herramientas que mejoran el SEO en Google, lo dejamos para otro día 😉

En este caso se trata de crear dinámicamente un DIV dentro del DOM de una página web a través de javascript utilizando JQuery.

Empezaremos por enlazar la librería jquery dentro del HEAD:

Y en el BODY le pondrémos un título y un DIV con texto:

E insertaremos nuestro código javascript al final, justo antes de cerrar el body. Utilizaremos la función append() de JQuery sobre el body lo que insertará el contenido que le enviemos a la función append justo antes del cierre del body.

Si queremos insertarlo en otro div, podemos hacerlo, por ejemplo, aplicando append a la clase del mismo:

Puede que en ocasiones queramos en vez de añadir código a un elemento, sustituirlo por entero, en ese caso utilizaremos la funcion html(). En este ejemplo sustituimos todo el contenido del body por el parámetro enviado a la función html.

Finalmente, en nuestro ejemplo, hemos utilizado bootstrap para mejorar la parte estética con tres botones, uno con cada una de las funcionalidades que acabamos de explicar, y hemos utilizado la función click() en nuestro código javascript para controlar las acciones sobre los botones:

 

Podéis ver una demo en:

http://bitacoraweb.info/code/crear-div-dinamicamente-javascript-jquery/

Y descargar el ejemplo en:

Download

Descargas realizadas: 826

Espero que te sirva, si es así comparte.

 

(Visitado 11.327 veces, 1 visitas hoy)