Crear y modificar elementos del DOM con JS
Capítulo 55: Modificando elementos del DOM
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 a 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".
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 propiedad tagName.
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.
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í:
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).
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>
<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í:
const contenedorDiv = document.createElement("div");
document.body.appendChild(contenedorDiv);
contenedorDiv.id = "contenedor";
El <div> es invisible, pero podemos verlo en las herramientas de desarrollo con el atributo que le hemos dado.
Ahora, añadamos el código del párrafo. Debería quedar así:
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);
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.
<!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.
const contenedorDiv = document.createElement("div");
document.body.appendChild(contenedorDiv);
contenedorDiv.id = "contenedor";
contenedorDiv.className = "alert alert-danger container";
Como puedes ver, el atributo en JavaScript className genera en el DOM el atributo html class con cuantos estilos le pasemos.
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.
contenedorDiv.textContent = "Este div está quedando con mucho \"Estilo\".";
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.
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\".";
Ejercicios de JavaScript
- Crea tres elementos <p> con cualquier frase y muéstralos en el documento.
- Crea el siguiente párrafo desde JavaScript. Como pista, el texto resaltado en html se escribe con
<b>o<strong>. Debes incluir la comillas.
"La palabra JavaScript está resaltada".
La solución la encontrarás aquí: Haz click aquí.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
