innerHTML

Título curso Aprende a programar (con Javascript)

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.

<button onclick="cambiarLista()">¡Cambia la lista!</button>
<ul id="listaTest">
 <li>Antes del clic (item 1)</li>
 <li>Antes del clic (item 2)</li>
</ul>
<script>
function cambiarLista() {
document.getElementById("listaTest").innerHTML = "<li>Item1 después del clic</li><li>Item2 después del clic</li>";
}
</script>

<button onclick="cambiarLista()">¡Cambia la lista!</button>

<li>Antes del clic (item 1)</li>

<li>Antes del clic (item 2)</li>

</ul>

function cambiarLista() {

document.getElementById("listaTest").innerHTML = "<li>Item1 después del clic</li><li>Item2 después del clic</li>";

}

</script>

<button onclick="nuevoTexto()">Crea un párrafo!</button>

<p id="nuevo"></p>

<script>
function nuevoTexto() {
document.getElementById("nuevo").innerHTML = "Hemos incluido este contenido a un párrafo vacío";
}
</script>

<button onclick="nuevoTexto()">Crea un párrafo!</button>

function nuevoTexto() {

document.getElementById("nuevo").innerHTML = "Hemos incluido este contenido a un párrafo vacío";

}

</script>

Para terminar, vamos a ver otro ejemplo:

<div id="recuadro" style="width:250px; height:50px; padding: 20px; border: 3px solid black"
onmouseover="document.getElementById('recuadro').style.borderColor='red';"
onmouseout="document.getElementById('recuadro').style.borderColor='green';">
<p>Pasa y sal del recuadro con el ratón</p>
</div>

<div id="recuadro" style="width:250px; height:50px; padding: 20px; border: 3px solid black"

onmouseover="document.getElementById('recuadro').style.borderColor='red';"

onmouseout="document.getElementById('recuadro').style.borderColor='green';">

<p>Pasa y sal del recuadro con el ratón</p>

</div>

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.