Uno de los tarase que realizaremos con mayor frecuencia al manipular el DOM es insertar o eliminar nodos.
En este artículo, exploraremos en detalle cómo llevar a cabo estas operaciones utilizando JavaScript, proporcionando ejemplos y explicaciones adecuadas para estudiantes universitarios.
JavaScript ofrece varios métodos relacionados con la modificación de la estructura del DOM. Estos métodos se pueden clasificar en las siguientes categorías:
- Insertar nuevos elementos
- Remplazar elementos
- Eliminar elementos
Crear e insertar Elementos
Estos métodos nos permiten crear o insertar nuevos nodos en el árbol DOM.
| Método | Descripción |
|---|---|
document.createElement() | Crea un nuevo elemento HTML. |
appendChild() | Inserta un nodo al final de la lista de hijos del nodo padre. |
insertBefore() | Inserta un nodo antes de un nodo de referencia. |
createElement()
Para insertar nuevos elementos en el DOM, primero debes crear los nodos que deseas añadir. Esto se realiza utilizando el método document.createElement().
const nuevoElemento = document.createElement('div');
nuevoElemento.textContent = 'Este es un nuevo div';appendChild()
Una vez creado el nuevo elemento, puedes insertarlo en el DOM usando el método appendChild(), que añade el elemento al final de la lista de hijos del nodo padre.
const contenedor = document.getElementById('contenedor');
contenedor.appendChild(nuevoElemento);insertBefore()
Si deseas insertar un nuevo nodo antes de un nodo existente en el DOM, puedes usar el método insertBefore(). Este método requiere dos parámetros: el nuevo nodo a insertar y el nodo de referencia antes del cual se insertará el nuevo nodo.
const nuevoElemento = document.createElement('div');
nuevoElemento.textContent = 'Elemento insertado';
const contenedor = document.getElementById('contenedor');
const referencia = document.getElementById('referencia');
contenedor.insertBefore(nuevoElemento, referencia);Reemplazar elementos
También podemos reemplazar un nodo existente del DOM por otro, con este método.
| Método | Descripción |
|---|---|
replaceChild() | Reemplaza un nodo existente con uno nuevo. |
replaceChild()
La función replaceChild() permite reemplazar un elemento existente en el DOM con otro elemento creado con createElement().
Esta función toma dos argumentos: el elemento que se va a agregar y el elemento que se va a reemplazar.
const oldElement = document.getElementById('old');
parentElement.replaceChild(newElement, oldElement);
En este ejemplo, se obtiene un elemento existente con el ID old utilizando la función getElementById(). Luego, se reemplaza oldElement con newElement utilizando la función replaceChild().
Cómo eliminar elementos del DOM
Finalmente, estos métodos nos permiten eliminar elementos existentes en el árbol DOM.
| Método | Descripción |
|---|---|
removeChild() | Elimina un nodo hijo referenciado desde su nodo padre. |
remove() | Elimina directamente un elemento del DOM. |
innerHTML = '' | Limpia todos los hijos de un nodo. |
removeChild()
Para eliminar un nodo hijo, primero debes seleccionar el nodo a eliminar y su nodo padre. Luego, utiliza el método removeChild() del nodo padre.
const contenedor = document.getElementById('contenedor');
const hijo = document.getElementById('hijo');
contenedor.removeChild(hijo);remove()
Si solo necesitas eliminar el propio elemento sin necesidad de referenciar su padre, puedes usar el método remove() directamente en el nodo.
const elemento = document.getElementById('mi-elemento');
elemento.remove();Eliminar todo
Si necesitas eliminar todos los hijos de un nodo, puedes utilizar innerHTML para establecer el contenido del nodo a una cadena vacía.
const contenedor = document.getElementById('contenedor');
contenedor.innerHTML = '';Usar fragmentos de documento
Cuando necesites añadir múltiples elementos al DOM, es más eficiente utilizar un DocumentFragment. Esto evita múltiples render y mejora el rendimiento.
| Método | Descripción |
|---|---|
document.createDocumentFragment() | Permite usar un fragmento temporal. |
Por ejemplo,
const fragmento = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const nuevoElemento = document.createElement('div');
nuevoElemento.textContent = `Elemento ${i + 1}`;
fragmento.appendChild(nuevoElemento);
}
const contenedor = document.getElementById('contenedor');
contenedor.appendChild(fragmento);