En el mundo del desarrollo web, HTML es la estructura que se utiliza para construir una casa y los nodos son los ladrillos individuales que juntos forman la página web. En este artículo, exploraremos cómo se pueden crear nodos en HTML y cómo los puedes manipular. Más concretamente, nos sumergiremos en cómo crear un nodo element, el tipo de nodo más común, y cómo estos se pueden añadir o eliminar de nuestro árbol DOM (Document Object Model).
¿Qué es un nodo?
Antes de ver cómo crear nodos en HTML, debemos entender qué es un nodo. En términos simples, un nodo es cualquier parte individual de nuestro árbol DOM. Puede ser un elemento HTML (también conocido como «nodo element«), un texto (tipo text) dentro de un elemento HTML (llamado «nodo de texto«) o un comentario dentro del código HTML, entre otros.
Por ejemplo, imagina que tienes un párrafo en tu código HTML. Esto se considera un «nodo element«. Dentro de este nodo puede haber un «nodo de texto«, que es el texto que se muestra en el párrafo.
Cómo crear nodos en HTML paso a paso
Ahora que comprendes qué es un nodo, podemos proceder a crear nodos en HTML. Aunque puede sonar complicado, ¡es mucho más sencillo de lo que parece! Esto se logra en dos pasos:
- Primero, utilizamos el método
document.createElement()para crear el nodo. En este método, pasas como argumento el tipo de nodo que deseas crear. Por ejemplo, si quisieras crear un nuevo párrafo, escribiríasdocument.createElement("p"). - Segundo, necesitas decirle a tu nuevo nodo a dónde pertenece en el árbol DOM. Para esto, debes usar el método
parentNode.appendChild(). Aquí, «parentNode» es el nodo que se convertirá en el padre del nuevo nodo. De este modo, si tienes un nodo llamado «divNode» y quieres agregarle tu nuevo párrafo, escribiríasdivNode.appendChild(nuevoParrafo).
Veámoslo en líneas de código: primero, tienes que tener en tu archivo HTML un contenedor donde añadir el nuevo nodo. Por ejemplo, un div con id «contenedor»:
<!DOCTYPE html>
<html>
<head>
<title>Crear nodo HTML</title>
</head>
<body>
<div id="contenedor">
<p>Este es un párrafo original.</p>
</div>
<script src="script.js"></script>
</body>
</html>Luego, en tu archivo JavaScript (en este caso, «script.js»), crearías un nuevo nodo y lo agregarías al div «contenedor» de esta manera:
// Crear un nuevo nodo de tipo 'p'
let nuevoNodo = document.createElement('p');
// Crear un nodo de tipo text
let textoNuevoNodo = document.createTextNode('Este es un párrafo creado con JavaScript');
// Asignar el nodo de tipo text como hijo del nodo 'p'
nuevoNodo.appendChild(textoNuevoNodo);
// Obtener el nodo padre donde queremos añadir el nuevo nodo
let nodoPadre = document.getElementById('contenedor');
// Añadir el nuevo nodo como hijo del nodo padre
nodoPadre.appendChild(nuevoNodo);
Así, has creado un «nodo element» y lo has establecido como hijo de otro nodo. Pero ¿qué pasaría si quisieras eliminar un nodo?
Eliminar un nodo
La eliminación de nodos también es sencilla. El método que necesitas es parentNode.removeChild(). Al igual que con el método appendChild(), necesitas identificar el nodo padre y el nodo hijo que deseas eliminar. Siguiendo con nuestro ejemplo anterior, si deseas eliminar «nuevoParrafo» de «divNode«, escribirías:
divNode.removeChild(nuevoParrafo)
Es importante mencionar que para que este método funcione, el nodo que quieres eliminar debe ser un nodo hijo directo del nodo padre. Si intentas eliminar un nodo que no es hijo directo, JavaScript lanzará un error.
El poder de los nodos en tus manos
Crear nodos en HTML y dominarlos te permite manipular tu página web de formas increíbles. Con el poder de los nodos, puedes crear, modificar o eliminar cualquier elemento de tu página web sobre la marcha, haciendo que tu página sea verdaderamente interactiva y dinámica.
Además, cuando trabajas con nodos, puedes aprovechar la naturaleza jerárquica del DOM. Esto significa que puedes acceder a cualquier «nodo hijo» desde un «nodo padre«.
Crear nodos en HTML es solo la punta del iceberg en lo que respecta al desarrollo web. Si te ha gustado lo que has leído, el Desarrollo Web Full Stack Bootcamp de KeepCoding es perfecto para ti. En esta formación intensiva aprenderás de manera teórica y práctica para, en muy pocos meses, estar listo para entrar y destacar en el mercado laboral IT. ¡Pide más información ahora e impulsa tu futuro profesional!
