getElementById – innerHTML – Digital Learning

Curso Diseño y Programación Páginas Web: Introducción a la Programación con Javascript

DOM: método getElementByID y propiedad innerHTML

Ya hemos presentado el método getElementById en el apartado anterior. Vamos a ampliar un poco más sobre él, para entender mejor las posibilidades que nos ofrece, combinada con otras ‘funcionalidades’ que pone a nuestra disposición Javascript a través del DOM, como son los eventos o la propiedad innerHTML.

Para visualizarlo, mostramos un ejemplo en el cuadro de abajo.

<p id="modificar">Esto es un párrafo que modificaremos</p>
<p>Esto es un párrafo que permanecerá igual</p>
<input type="button" value="Cámbiame !" id="cambiar" />
<script>
var boton = document.getElementById("cambiar");
boton.onclick = change;
function change() {
 var textoCambiar = document.getElementById("modificar")
 textoCambiar.style.fontSize = "1.5em";
 textoCambiar.innerHTML = "He cambiado el texto y tamaño del párrafo";
 }
</script>

<p id="modificar">Esto es un párrafo que modificaremos</p>

<p>Esto es un párrafo que permanecerá igual</p>

var boton = document.getElementById("cambiar");

boton.onclick = change;

function change() {

var textoCambiar = document.getElementById("modificar")

textoCambiar.style.fontSize = "1.5em";

textoCambiar.innerHTML = "He cambiado el texto y tamaño del párrafo";

}

</script>

En él, hemos creado con HTML dos párrafos, identificando uno de ellos con el id=”modificar” (linea 1) y un botón, con el identificativo “cambiar” (linea 3)

Con Javascript, en la 1ª línea del script (linea 5), seleccionamos al botón por su identificativo ( getElementById="cambiar" ) y lo asociamos a un objeto ‘boton’.

En la 2ª (linea 6), vamos a capturar el evento ‘onclick‘, que como ya vimos, nos da la posibilidad de detectar el momento en que el usuario pincha ese botón, para ‘disparar’ unas determinadas acciones, en este caso llamar a la función change.

Nota: quizás te has dado cuenta que ésta era la segunda forma que vimos de asociar un evento a un elemento

¿Qué hace esa función?:

Vemos en su definición que selecciona el primer párrafo de forma similar a como hicimos con el botón: var textoCambiar = document.getElementById("modificar")
En la siguiente línea, le aplica a ese párrafo escogido que hemos asignado a la variable ‘textoCambiar’ un estilo de tamaño de fuente mayor utilizando la propiedad ‘style’ de ese elemento (recuerda el ejemplo que vimos en el apartado anterior utilizando esta misma sintaxis: «elemento.style.propiedad»)
En la siguiente línea cambiamos el texto de ese elemento con la propiedad ‘innerHTML’. En el siguiente sección explicaremos esta propiedad

Copia y pega este código en el editor online. Pincha en el botón y verás el resultado. Aunque es un ejemplo muy simple, nos puede dar una idea de la potencia que nos proporciona la combinación de JavaScript con el DOM.

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.

<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.