Saltear al contenido principal
Título curso Aprende a programar (con Javascript)

innerHTML

Hemos visto en el ejemplo que utilizando la propiedad innerHTML de un elemento (un párrafo que habíamos seleccionado) le hemos podido modificar su contenido.Con esta propiedad podemos tanto ‘capturar’ todo el contenido de un elemento, incluido su marcado HTML, como modificar o crear contenido nuevo a un elemento, incluyendo igualmente etiquetado HTML. Vemos dos ejemplos en este script que nos darán una idea mejor de lo que hemos dicho:

Nota: en este caso, para simplificar el código, no hemos almacenado el elemento seleccionado por getElementByID en una variable. Le hemos aplicado la propiedad ‘innerHTL’ directamente. Funciona de ambas formas.

Para terminar, vamos a ver otro ejemplo:
Hemos incluido/utilizado:

  • Un ‘div’ identificado como ‘recuadro’ al que le hemos resaltado el borde con una regla de estilo interna
  • Los eventos ‘onmouseover’  y ‘onmouseout’, es decirt, pasar y salir con el ratón por encima de un elemento de la página, respectivamente
  • Seleccionamos el div con document.getElementById('recuadro')
  • Utilizamos la ya conocida propiedad ‘style’ que nos permite aplicar/modificar estilos al elemento seleccionado. En este caso, cambiando el color del borde

Pruébalo en el editor online. Intenta hacer variaciones de este script para conseguir otros efectos: otros colores del borde, aumentar/disminuir su grosor, cambiar el párrafo del interior del recuadro cuando pasas o sales con el ratón.

Hay otras formas de modificar contenido de un nodo del DOM, por ejemplo con la propiedad textContent, similar a innerHTML aunque con alguna diferencia importante. Para ver ésta y otras formas puedes consultar el apartado “modificar contenido” de nuestro curso JavaScript y jQuery.

Volver arriba