Reemplazar, Clonar y Eliminar Elementos en el DOM con JavaScript

Modificar la estructura de una página web no solo implica agregar nuevos elementos al DOM, sino también reemplazar, duplicar o eliminar nodos existentes. Estas acciones son fundamentales cuando trabajamos con interfaces dinámicas, como listas de tareas, menús interactivos o contenido que debe actualizarse sin recargar la página.

Para lograr esto, JavaScript nos ofrece los métodos replaceChild(), cloneNode() y removeChild(), cada uno con su propio propósito. En este artículo, exploraremos cómo usarlos correctamente, en qué situaciones son más útiles y qué errores debemos evitar al manipular el DOM de manera eficiente.

Reemplazar un Elemento en el DOM con replaceChild()

En algunas situaciones, es necesario reemplazar un nodo existente por otro. En lugar de eliminar el antiguo y luego agregar el nuevo, podemos hacerlo en un solo paso con replaceChild(), lo que mejora el rendimiento del DOM.

nodoPadre.replaceChild(nuevoElemento, elementoExistente);

• nodoPadre: Es el contenedor que contiene el nodo que queremos reemplazar.
• nuevoElemento: Es el nodo que queremos insertar en lugar del existente.
• elementoExistente: Es el nodo que será eliminado y reemplazado.

Ejemplo: Reemplazar un párrafo en un div

Supongamos que tenemos un <div> con un párrafo dentro y queremos reemplazar su contenido al hacer clic en un botón. Primero, definimos la estructura HTML:

<div id="contenedor">
  <p id="parrafo">Este es el texto original.</p>
</div>
<button onclick="reemplazarParrafo()">Reemplazar</button>

Ahora, en JavaScript, crearemos una función que cree un nuevo párrafo y reemplace el existente usando replaceChild().

function reemplazarParrafo() {
  const contenedor = document.getElementById("contenedor");
  const parrafoViejo = document.getElementById("parrafo");

  // Crear un nuevo párrafo
  const nuevoParrafo = document.createElement("p");
  nuevoParrafo.textContent = "Este es el texto reemplazado.";

  // Reemplazar el párrafo viejo con el nuevo
  contenedor.replaceChild(nuevoParrafo, parrafoViejo);
}

Resultado en el DOM tras hacer clic en el botón:

<div id="contenedor">
  <p>Este es el texto reemplazado.</p>
</div>

Clonar un Elemento en el DOM con cloneNode()

A veces necesitamos duplicar un elemento en el DOM, ya sea con o sin sus nodos internos. Para esto usamos cloneNode(), este método que nos ofrece el lenguaje nos permite hacer una copia exacta de un nodo existente.

elementoClonado = elementoOriginal.cloneNode(true | false);

• Si pasamos true como argumento, se clonará el nodo con todos sus hijos (copia profunda).
• Si pasamos false (o dejamos el parámetro vacío), solo se clonará el nodo en sí, sin su contenido interno.

Ejemplo: Clonar un botón y agregarlo al DOM

Queremos duplicar un botón existente y agregar la copia dentro de un contenedor diferente. Primero, creamos la estructura HTML:

<button id="botonOriginal">Haz clic aquí</button>
<div id="contenedor"></div>
<button onclick="clonarBoton()">Clonar Botón</button>

En JavaScript, crearemos la siguiente función que clona el botón original y lo inserta en el contenedor.

function clonarBoton() {
  const botonOriginal = document.getElementById("botonOriginal");
  const contenedor = document.getElementById("contenedor");

  // Clonar el botón con todo su contenido
  const botonClonado = botonOriginal.cloneNode(true);
  botonClonado.textContent = "Botón Clonado";

  // Agregar el botón clonado al contenedor
  contenedor.appendChild(botonClonado);
}

Resultado en el DOM tras hacer clic en “Clonar Botón”:

<button id="botonOriginal">Haz clic aquí</button>
<div id="contenedor">
  <button>Botón Clonado</button>
</div>

Eliminar un Elemento del DOM con removeChild()

Para eliminar un nodo del DOM, utilizamos removeChild(), este método nos va a permitir eliminar un elemento específico dentro de un nodo padre.

nodoPadre.removeChild(nodoHijo);

• nodoPadre: Es el contenedor que contiene el nodo que queremos eliminar.
• nodoHijo: Es el nodo que será eliminado.

Ejemplo: Eliminar un elemento de una lista

Supongamos que tenemos una lista con dos elementos y queremos eliminar el primero al hacer clic en un botón. Pues bien, esto lo hacemos fácilmente con el método removeChild().

Definimos la estructura HTML de la lista:

<ul id="lista">
  <li id="item1">Elemento 1</li>
  <li id="item2">Elemento 2</li>
</ul>

<button onclick="eliminarElemento()">Eliminar Elemento 1</button>

Ahora, en el siguiente código JavaScript creamos una función que selecciona el elemento y lo elimina usando removeChild().

function eliminarElemento() {
  const lista = document.getElementById("lista");
  const item = document.getElementById("item1");

  // Verificar que el elemento existe antes de eliminarlo
  if (item) {
    lista.removeChild(item);
  } else {
    console.warn("El elemento ya fue eliminado o no existe.");
  }
}

Conclusión

Modificar el DOM de manera eficiente implica no solo agregar nuevos elementos, sino también reemplazar, clonar y eliminar nodos existentes en el árbol de estructural del HTML.

En este artículo aprendimos a:

• Reemplazar un nodo con replaceChild() de manera directa.
• Clonar un nodo con cloneNode(), eligiendo si queremos incluir su contenido o solo la estructura.
• Eliminar un nodo con removeChild(), asegurándonos de verificar su existencia antes de eliminarlo.

Cada método tiene un uso específico y su correcta implementación nos ayuda a optimizar la manipulación del DOM, evitando errores y mejorando el rendimiento.

En el siguiente tutorial exploraremos cómo insertar elementos antes o después de un nodo en el DOM utilizando insertBefore() y insertAfter(). 🚀