Saltar al contenido principal

Manipulación HTML

En la lección anterior aprendimos a utilizar JavaScript para seleccionar y crear elementos HTML.

Ahora vamos a aprender a modificar esos elementos de una forma mucho más completa, no solo utilizando textContent.

Con JavaScript podemos cambiar:

  • El contenido de un elemento.
  • El HTML que contiene.
  • Sus clases CSS.
  • Sus estilos.
  • Sus atributos.

textContent​

Ya hemos utilizado textContent anteriormente.

Sirve para consultar o modificar el texto que contiene un elemento.

Por ejemplo:

<h1 id="titulo">
    Hola
</h1>

Podemos modificarlo:

let titulo = document.querySelector("#titulo");

titulo.textContent = "Bienvenido";

Ahora veremos:

Bienvenido

textContent no interpreta HTML

Esto es importante.

Si hacemos:

titulo.textContent = "<strong>Bienvenido</strong>";

La página mostrará literalmente:

<strong>Bienvenido</strong>

No interpretará <strong> como una etiqueta HTML.

Esto ocurre porque textContent trabaja únicamente con texto.

innerHTML​

innerHTML permite consultar o modificar el HTML que hay dentro de un elemento. Sigue la misma sintaxis que el textContent:

mensaje.innerHTML = "HTML de dentro";

Por ejemplo:

<div id="mensaje">
    Hola
</div>

Podemos hacer:

// 1. Recuperar el elemento que queremos modificar, en este caso el <div>
let mensaje = document.querySelector("#mensaje");

// 2. Añadir contenido HTML usando innerHTML
mensaje.innerHTML = "<strong>Hola</strong>";

Ahora el navegador interpretará la etiqueta <strong>.

El resultado será:

<div id="mensaje">
    <strong>Hola</strong>
</div>

Y veremos el mensaje en negrita (que es lo que significa <strong>):

Hola

Diferencia entre textContent e innerHTML​

Esta es una diferencia muy importante:

elemento.textContent = "<strong>Hola</strong>";

Muestra el texto literal:

<strong>Hola</strong>

Mientras que:

elemento.innerHTML = "<strong>Hola</strong>";

muestra el texto Hola en negrita, puesto que sabe interpretar etiquetas HTML:

Hola

Añadir varios elementos con innerHTML​

innerHTML también nos permite crear varios elementos de una sola vez.

Por ejemplo, tenemos nuestro <div> vacío:

<div id = "contenedor">

</div>

Y queremos conseguir:

<div id = "contenedor">
    <h2>Productos</h2>
    <p>Teclado</p>
    <p>Ratón</p>
    <p>Monitor</p>
</div>

Una manera de hacerlo es con la combinación anterior de createElement + appendChild. Pero también podemos utilizar innerHTML:

// 1. Recupero el div
let contenedor = document.querySelector("#contenedor");

// 2. Añado su contenido html con innerHTML escribiendo etiquetas html literalmente
contenedor.innerHTML = `
    <h2>Productos</h2>
    <p>Teclado</p>
    <p>Ratón</p>
    <p>Monitor</p>
`;

El HTML generado será:

<div id="contenedor">

    <h2>Productos</h2>

    <p>Teclado</p>

    <p>Ratón</p>

    <p>Monitor</p>

</div>

Esto puede resultar muy cómodo cuando necesitamos insertar una estructura HTML completa.

innerHTML y variables​

Podemos combinar innerHTML con template literals (${variable}).

Por ejemplo:

// 0. Tenemos la información guardada en variables
let nombre = "Maria";
let edad = 25;

// 1. Recuperamos el div
let contenedor = document.querySelector("#contenedor");

// 2. Añadimos contenido html usando las variables anteriores
contenedor.innerHTML = `
    <h2>${nombre}</h2>
    <p>Edad: ${edad}</p>
`;

El resultado será:

<div id="contenedor">
    <h2>Maria</h2>
    <p>Edad: 25</p>
</div>

Esto resulta especialmente útil cuando tenemos datos almacenados en variables, arrays u objetos y queremos mostrarlos en una página.

classList​

Las clases CSS permiten definir cómo se muestra un elemento (su estilo, color, tamaño...). Con classList podemos modificar el CSS.

Por ejemplo:

<p class="importante">
    Este mensaje es importante
</p>

Desde JavaScript podemos añadir, eliminar o comprobar clases utilizando:

elemento.classList

Imagina que las clases son como pegatinas que colocamos sobre los elementos.

Podemos poner una pegatina, quitársela o comprobar si la tiene:

.importante

classList.add()​

Con el .add() podemos añadir una clase CSS al elemento.

Por ejemplo, imaginemos que tenemos un archivo .css con la siguiente clase:

.alerta {
    color: orange;
}

Y queremos que nuestro <p> tenga esa clase alerta:

<p id="mensaje">Hola</p>

A través de elemento.classList.add(clase) podemos añadir la clase que queramos al elemento que queramos:

// 1. Recuperamos el <p>
let mensaje = document.querySelector("#mensaje");

// 2. Añadimos la clase "alerta" a nuestro <p>
mensaje.classList.add("alerta");

Ahora el elemento será:

<p id="mensaje" class="alerta">
    Hola
</p>

classList.remove()​

remove() elimina una clase:

mensaje.classList.remove("alerta");

Ahora volveríamos a tener:

<p id="mensaje">
    Hola
</p>

classList.toggle()​

toggle() es especialmente útil cuando queremos activar y desactivar algo.

Si la clase no existe, la añade.

Si ya existe, la elimina.

mensaje.classList.toggle("importante");

Podemos imaginarlo como un interruptor:

No tiene la clase
       ↓
    toggle()
       ↓
Tiene la clase

Tiene la clase
       ↓
    toggle()
       ↓
No tiene la clase

Es muy habitual utilizarlo para cosas como:

  • Mostrar/ocultar elementos.
  • Activar un menú.
  • Cambiar un botón.
  • Marcar elementos como seleccionados.
  • Cambiar entre modo claro y oscuro.

classList.contains()​

Permite comprobar si un elemento tiene una determinada clase. Es muy útil combinado con los if().

if (mensaje.classList.contains("alerta")) {

    console.log("El mensaje es importante");

}

Devuelve:

true

si tiene la clase, o:

false

si no la tiene.

style​

También podemos modificar directamente los estilos CSS de un elemento utilizando:

elemento.style

Por ejemplo, imaginemos que tenemos el siguiente párrafo:

<p id="mensaje">
    Hola
</p>

Y no tenemos ninguna clase css ya preparada para colorearlo de rojo. Con style podemos añadir css directamente.

La sintaxis siempre será:

elemento.style.propiedadCSS = valor;

Por ejemplo, podemos cambiar el color:

// 1. Recuperamos el elemento
let mensaje = document.querySelector("#mensaje");

// 2. Establecemos la propiedad CSS color a rojo
mensaje.style.color = "red";

Ahora el texto aparecerá en rojo.​

Modificar varios estilos​

Podemos modificar diferentes propiedades siempre con el style.propiedad:

mensaje.style.color = "blue";
mensaje.style.backgroundColor = "yellow";
mensaje.style.fontSize = "24px";

El resultado será un elemento con:

Texto azul
Fondo amarillo
Tamaño de 24px

Nombres de propiedades CSS​

Hay que tener en cuenta que algunas propiedades CSS utilizan guiones:

background-color
font-size
border-radius

En JavaScript escribiremos esas propiedades utilizando camelCase:

elemento.style.backgroundColor = "yellow";
elemento.style.fontSize = "24px";
elemento.style.borderRadius = "10px";

Por ejemplo:

CSS                         JavaScript

background-color     →     backgroundColor
font-size            →     fontSize
border-radius        →     borderRadius
margin-top           →     marginTop

Modificar atributos​

Los elementos HTML pueden tener atributos.

Por ejemplo:

<img id="foto" src="imagen1.jpg" alt="Una imagen">

En este caso:

id
src
alt

son atributos.

JavaScript permite consultar, modificar, añadir y eliminar estos atributos.

getAttribute()​

Podemos consultar el valor de un atributo utilizando la sintaxis:

elemento.getAttribute("atributo")

Por ejemplo, imaginemos que tenemos una imagen y queremos consultar el valor que hay en el atributo src:

// 1. Recuperamos el elemento de la imagen
let imagen = document.querySelector("#foto");

// 2. Mostramos el atributo src
console.log(imagen.getAttribute("src"));

Si tenemos:

<img id="foto" src="imagen1.jpg">

obtendremos:

imagen1.jpg

setAttribute()​

Con getAttribute() simplemente consultamos el valor del atributo. Pero también podemos modificar el atributo utilizando:

elemento.setAttribute("atributo", "nuevo valor")

Por ejemplo, el siguiente código cambiaría el src de la imagen a "imagen2.jpg":

imagen.setAttribute("src", "imagen2.jpg");

Ahora el HTML será:

<img id="foto" src="imagen2.jpg">

Esto puede ser útil, por ejemplo, para cambiar una imagen dinámicamente.

removeAttribute()​

También podemos eliminar un atributo.

Por ejemplo:

imagen.removeAttribute("alt");

Esto eliminará el atributo alt del elemento.

Atributos comunes​

Algunos de los atributos que encontraremos con frecuencia son:

id
class
src
alt
href
value
disabled
title

Por ejemplo, un enlace:

<a id="enlace" href="https://ejemplo.com">
    Visitar página
</a>

Podemos cambiar su destino:

let enlace = document.querySelector("#enlace");

enlace.setAttribute("href", "https://google.com");

Atributos como propiedades​

Algunos atributos comunes también pueden modificarse directamente como propiedades.

Por ejemplo, en una imagen, no es necesario modificar el src utilizando:

imagen.setAttribute("src", "nueva-imagen.jpg");

Existe un "atajo" para acceder directamente:

imagen.src = "nueva-imagen.jpg";

En un enlace:

enlace.href = "https://google.com";

En un campo de texto:

input.value = "Hola";

En un botón:

boton.disabled = true;

Por ejemplo:

<button id="boton">
    Enviar
</button>

Podemos desactivarlo:

let boton = document.querySelector("#boton");

boton.disabled = true;

Ahora el usuario no podrá pulsarlo.

Todos estos atributos son tan comunes que JavaScript tiene una propiedad para acceder a ellos sin necesidad de utilizar getAttribute() o setAttribute() etc. Todos los "atajos" siguen la misma estructura que vimos con el textContent:

elemento.propiedad = nuevo valor;

imagen.src = "nueva.jpg";
enlace.href = "hola.es";
parrafo.textContent = "Nuevo contenido";

Ejemplo completo​

Vamos a combinar todo lo aprendido.

Tenemos una tarjeta de producto, donde:

  1. Todo se engloba dentro de un div.
  2. Hay un h2 que pone "Teclado".
  3. Hay un p que pone "40 €".
  4. Hau una imagen.
<div id="producto">

    <h2 id="nombre">Teclado</h2>

    <p id="precio">40 €</p>

    <img
        id="imagen"
        src="teclado.jpg"
        alt="Teclado"
    >

</div>

Ten en cuenta que vamos a utilizar indistintamente querySelector() o getElementById().

a. Modificar el nombre del producto a "Teclado mecánico":

// 1. Recuperamos el elemento que guarda el nombre
let nombre = document.querySelector("#nombre");

// 2. Cambiamos su contenido a "Teclado mecánico"
nombre.textContent = "Teclado mecánico";

b. Cambiar el precio a 50 €:

// 1. Recuperamos el elemento que guarda el precio
let precio = document.getElementById("precio");

// 2. Cambiamos su contenido a "50 €"
precio.textContent = "50 €";

c. Cambiar la imagen por teclado-mecanico.jpg:

// 1. Recuperamos el elemento de la imagen
let imagen = document.querySelector("img");

// 2. Cambiamos al atributo src
imagen.setAttribute("src", "teclado-mecanico.jpg");

// o así:
imagen.src = "teclado-mecanico.jpg";

d. Añadir al nombre la clase CSS "destacado"

nombre.classList.add("destacado");

e. Modificar el estilo del precio para que aparezca en rojo:

precio.style.color = "red";

Hemos utilizado diferentes herramientas para modificar diferentes partes del elemento.

Resumen

Es importante no utilizar siempre la misma herramienta.

textContent​

Cuando queremos trabajar únicamente con texto.

elemento.textContent = "Hola";

innerHTML​

Cuando queremos insertar HTML.

elemento.innerHTML = "<strong>Hola</strong>";

classList​

Cuando queremos añadir, eliminar o comprobar clases CSS.

elemento.classList.add("activo");

style​

Cuando queremos modificar directamente un estilo.

elemento.style.color = "red";

getAttribute()​

Para consultar un atributo.

elemento.getAttribute("src");

setAttribute()​

Para modificar o añadir un atributo.

elemento.setAttribute("src", "foto.jpg");

removeAttribute()​

Para eliminar un atributo.

elemento.removeAttribute("disabled");

JavaScript permite modificar prácticamente cualquier parte de un elemento HTML.

              Elemento HTML
                    │
       ┌────────────┼────────────┐
       ↓            ↓            ↓
   Contenido      Clases      Atributos
       │            │            │
       ↓            ↓            ↓
textContent     classList    getAttribute
innerHTML                    setAttribute
                             removeAttribute
                    │
                    ↓
                  style

La idea principal es que primero seleccionamos un elemento y después decidimos qué queremos modificar.

Seleccionar
    ↓
Modificar contenido, clases, estilos o atributos
    ↓
La página cambia

Ejemplos resueltos

Ejercicio resuelto 1 - Cambiar un mensaje​

Enunciado​

Tenemos:

<p id="mensaje">
    Cargando...
</p>

Cambia el mensaje por:

Datos cargados correctamente.

Solución​

let mensaje = document.querySelector("#mensaje");

mensaje.textContent = "Datos cargados correctamente.";

Ejercicio resuelto 2 - Cambiar HTML​

Enunciado​

Tenemos:

<div id="resultado"></div>

Utiliza innerHTML para mostrar un título y un párrafo.

Solución​

let resultado = document.querySelector("#resultado");

resultado.innerHTML = `
    <h2>Resultado</h2>
    <p>La operación se ha realizado correctamente.</p>
`;

Ejercicio resuelto 3 - Activar una clase​

Enunciado​

Tenemos:

<p id="mensaje">
    Mensaje importante
</p>

Añade mediante JavaScript la clase importante.

Solución​

let mensaje = document.querySelector("#mensaje");

mensaje.classList.add("importante");

Ejercicio resuelto 4 - Cambiar un atributo​

Enunciado​

Tenemos:

<img id="imagen" src="foto1.jpg">

Cambia la imagen para que utilice foto2.jpg.

Solución​

let imagen = document.querySelector("#imagen");

imagen.setAttribute("src", "foto2.jpg");

Ejercicio resuelto 5 - Modificar un producto​

Enunciado​

Tenemos:

<div id="producto">
    <h2 id="nombre">Teclado</h2>
    <p id="precio">30 €</p>
</div>

Utiliza JavaScript para:

  • Cambiar el nombre a "Teclado mecánico".
  • Cambiar el precio a "50 €".
  • Cambiar el color del precio a rojo.

Solución​

let nombre = document.querySelector("#nombre");
let precio = document.querySelector("#precio");

nombre.textContent = "Teclado mecánico";

precio.textContent = "50 €";

precio.style.color = "red";