Modificando elementos del DOM - Curso de JavaScript de cero a máster - Capítulo 55

Hasta ahora hemos visto como acceder a los elementos del DOM. ¿Qué tal si ahora pasamos a generarlos desde JavaScript?

Crear un elemento del DOM con JavaScript

Independientemente de lo que hayas respondido en la pregunta, veamos como crear un elemento del DOM desde JavaScript. Por ejemplo, un párrafo.

Lo escribiremos en una constante, ya que el elemento siempre será "p".

Código JavaScript

const parrafo = document.createElement("p");
Palabra del lenguaje nº 86 encontrada.
createElement() es un método que crea un elemento HTML especificándolo con su propiedadtagName
Palabra del lenguaje nº 87 encontrada.
tagName es una propiedad de las etiquetas HTML que contiene un string con el nombre de la etiqueta.

El elemento se ha creado, ¿pero dónde? La respuesta es en la memoria. Ahora, le vamos a dar un valor al párrafo. Ya sabes con qué dárselo, el contenido de los elementos html (entre la apertura y el cierre) está en la propiedad innerHTML que tanto hemos utilizado.

Código JavaScript

parrafo.innerHTML = "Este párrafo está generado con JS.";

Ahora, ¿dónde está? Sigue solo en memoria. Hemos creado un elemento "p" con un valor entre su apertura y cierre. Aún no le hemos dicho donde tiene que mostrarlo.

Le diremos lógicamente que en el <body>, que es el lugar destinado a contener párrafos.

Tenemos que utilizar una propiedad nueva, appendChild. El conjunto de todo quedará así:

Código JavaScript

const parrafo = document.createElement("p");

parrafo.innerHTML = "Este párrafo está generado con JS.";

document.body.appendChild(parrafo);
Palabra del lenguaje nº 88 encontrada.
appendChild() es un método que añade un elemento hijo dentro de un elemento padre (parent). Por ejemplo, el <body> es un elemento padre para un párrafo ((hijo)child).

Resultado en el navegador

Puede que te salga de dos formas, así:

Este párrafo está generado con JS.

O así:

Este párrafo está generado con JS.

Si tu caso es el segundo, es porque no tienes indicada la codificación o la que tienes no admite acentos. Debes poner esta línea en el <head>

Etiqueta HTML

<meta charset="utf-8">

Probemos ahora de crear un div y poner el párrafo dentro.

Ahora, le daremos un id al <div>, con el que poder hacer referencia para incluir el párrafo dentro de él.

Crear atributos en elementos del DOM con JavaScript

Para especificar un atributo para un elemento html, lo haremos así:

Código JavaScript

const contenedorDiv = document.createElement("div");

document.body.appendChild(contenedorDiv);

contenedorDiv.id = "contenedor";

Resultado en el navegador

El <div> es invisible, pero podemos verlo en las herramientas de desarrollo con el atributo que le hemos dado.

createElement() javascript

Ahora, añadamos el código del párrafo. Debería quedar así:

Código JavaScript

const contenedorDiv = document.createElement("div");

document.body.appendChild(contenedorDiv);

contenedorDiv.id = "contenedor";

const parrafo = document.createElement("p");

parrafo.innerHTML = "Este párrafo está generado con JS.";

contenedorDiv.appendChild(parrafo);

Resultado en el navegador

appendChild() DOM javascript

Crear clases de estilos desde el DOM con JavaScript

Perfecto. Vamos a eliminar el párrafo. Ahora trabajaremos con el <div> ¿Qué tal si le damos unas clases de BootStrap para que se vea?

La página html que estoy utilizando, es la de los últimos capítulos, pero por si no la tienes a mano, aquí la tienes con el enlace a BootStrap.

Página HTML

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
	<meta charset="utf-8">
	<title>Curso de JavaScript</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous">
</head>
<body style="margin:1em">

</body>
<script src="test.js"></script>
</html>

Para añadirle un estilo a una etiqueta html, debemos crear el atributo class, sin embargo, class es una palabra reservada de JavaScript, ya la viste cuando utilizamos las clases de JavaScript que nada tienen que ver con las clases CSS. La solución, darle excepcionalmente otro nombre de atributo, para las clases será className en lugar de class.

Palabra del lenguaje nº 89 encontrada.
className es una propiedad para las etiquetas html, que hace referencia al atributo html class.

Código JavaScript

const contenedorDiv = document.createElement("div");

document.body.appendChild(contenedorDiv);

contenedorDiv.id = "contenedor";

contenedorDiv.className = "alert alert-danger container";

Resultado en el navegador

Como puedes ver, el atributo en JavaScript className genera en el DOM el atributo html class con cuantos estilos le pasemos.

estilos CSS desde el DOM javascript

Pongamos algo de texto dentro. Añade esta línea con algo nuevo, textContent.

Palabra del lenguaje nº 90 encontrada.
textContent es una propiedad para obtener (get) o establecer (set) el contenido de texto de un nodo y sus descendientes.

Código JavaScript

contenedorDiv.textContent = "Este div está quedando con mucho \"Estilo\".";
estilos CSS desde el DOM javascript

Para terminar, creemos y enlacemos una hoja de estilos propia. Así le añadimos algo más de dificultad. La hoja la llamaré test.css y la pondré en la raíz del proyecto. Añade esta línea al <head>:

Enlace a hoja CSS en página HTML

<link href="test.css" rel="stylesheet">

En la hoja CSS, añade este estilo para modificar el ancho de borde, el estilo del borde y el color:

CSS

.bordeDiv {
    border-width: 10px;
    border-style: dashed;
    border-color: brown;
}

Para aplicarlo, puedes utilizar la línea del className y escribir simplemente el nombre del estilo, como si fuera uno más de BootStrap, solo que la diferencia, es que este es tuyo y lo puedes modificar como quieras.

Código JavaScript

const contenedorDiv = document.createElement("div");

document.body.appendChild(contenedorDiv);

contenedorDiv.id = "contenedor";

contenedorDiv.className = "alert alert-danger container bordeDiv";

contenedorDiv.textContent = "Este div está quedando con mucho \"Estilo\".";

Resultado en el navegador

estilos CSS desde el DOM javascript