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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

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

<h1>Ejemplo Añadir un DIV con javascript-jquery</h1>
<div class="contenido">Texto por defecto</div>

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.

<script>
$('body').append('<div class="divBody">¡Felicidades! Has insertado un nuevo DIV en el BODY</div>');
</script>

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

<div class="contenido">Texto por defecto</div>
<script>
$('.contenido').append('<h2>¡Felicidades! Has insertado un texto en el div</h2>');
</script>

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.

$('body').html('<h2>¡Felicidades! Has cambiado el contenido del body</h2>');

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:

<button type="button" class="btn btn-primary btn-addDiv">Añadir título al DIV</button>
<button type="button" class="btn btn-warning btn-addBody">Añadir DIV al BODY</button>
<button type="button" class="btn btn-danger btn-changeBody">Sustituir el contenido de BODY</button>
<script>
  $('.btn-addBody').click(function( event ) {
  	$('body').append('<div class="divBody">¡Felicidades! Has insertado un nuevo DIV en el BODY</div>')
  });
  $('.btn-addDiv').click(function( event ) {
  	$('.contenido').append('<h2>¡Felicidades! Has insertado un texto en el div</h2>')
  });
  $('.btn-changeBody').click(function( event ) {
  	$('body').html('<h2>¡Felicidades! Has cambiado el contenido del body</h2>')
  });
  </script>

Podéis ver una demo en:

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

Y descargar el ejemplo en:

Descargar

Descargas realizadas: 1.225

Espero que te sirva, si es así comparte.

Alex Martínez Herrera

Especialista en Diseño y Desarrollo Web para Startups, PYMEs y Proyectos Personales | Experto en WordPress & Optimización SEO | Ayudo a autónomos y PYMEs a crecer su negocio.