Actualizar div con innerHTML JavaScript

Propiedad innerHTML

InnerHTML fue creado por Microsoft para Internet Explorer hace algunos años como método de acceso rápido al contenido de un contenedor en Html. Hasta hace poco no formaba parte de ningún estandar aunque se ha usado mucho por la comodidad que ofrece al ahorrar varias líneas de código para hacer ciertas cosas. Hoy en día ya es parte de la recomendación de HTML5 y es soportado por la mayoría de navegadores.

Además de ser una propiedad de lectura que permite obtener un string con lo que hay dentro de un div, también permite escribir dentro y cambiar su contenido. Por ejemplo, si tenemos un div como el siguiente:

<div id="caja"><p>Hola, esto es un div que se llama caja</p></div>

Podemos utilizar innerHTML para recoger el contenido del div y meterlo en una variable

var textodeldiv = document.getElementById("caja").innerHTML;

Pero también podemos modificar el contenido de ese div

document.getElementById("caja").innerHTML = "<p>Este es el nuevo contenido</p>";

El resultado sería

<div id="caja"><p>Este es el nuevo contenido</p></div>

Podemos actualizar el contenido de un div mediante una función de la siguiente manera

//Código JavaScript
<script type="text/javascript">
//Función recargar que cambia lo que hay en id="caja" por el contenido nuevo.
  function recargar(){
      document.getElementById("caja").innerHTML = "Contenido nuevo";
  }
</script>
//Código Html
<div id="caja">
  Contenido a cambiar
</div>

Llamada a la función anterior con un botón

<input type="button" value="Recargar" onclick="recargar()"/>

Más tutoriales de JavaScript

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo