Cómo crear un DIV dinámicamente con javascript jquery

Cómo crear un DIV dinámicamente con javascript jquery




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: 210

Espero que te sirva, si es así comparte.

 





Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies