Clonación y Reemplazo de Elementos en JavaScript

Manipular el DOM no se limita a crear elementos desde cero. En muchas ocasiones necesitas duplicar un elemento existente o sustituir uno por otro sin generar nodos nuevos. JavaScript ofrece dos métodos precisos para estas tareas: cloneNode() y replaceWith(), y dominarlos te dará un control mucho más fino sobre la estructura de tu página.

¿Cómo clonar un elemento con cloneNode? [01:50]

Antes de clonar cualquier cosa, el primer paso siempre es seleccionar el elemento original. Puedes hacerlo con document.querySelector() o incluso ejecutar un query dentro de un contenedor que ya tengas almacenado en una variable.

javascript const contentArea = document.querySelector('#contentArea'); const originalP = contentArea.querySelector('p');

En este ejemplo se selecciona primero el contenedor padre por su ID y luego, desde ese contenedor, se busca la etiqueta <p> que hay dentro [03:30]. Esto resulta útil cuando quieres acotar la búsqueda a una sección específica del DOM en lugar de recorrer todo el documento.

Una vez que tienes el elemento original, aplicas el método cloneNode(true) para obtener una copia idéntica:

javascript const clonParrafo = originalP.cloneNode(true);

El parámetro true indica que se debe realizar una clonación profunda (deep clone), es decir, se copia el nodo junto con todo su contenido interno. Sin ese true, obtendrías únicamente la etiqueta vacía [04:20].

¿Cómo inyectar y modificar el clon?

El clon todavía no aparece en pantalla; es un nodo que vive solo en memoria. Para que sea visible hay que inyectarlo en el DOM con append():

javascript contentArea.append(clonParrafo);

En el momento en que se ejecuta esa línea, el párrafo clonado aparece dentro del contenedor [05:10]. A partir de ahí puedes modificarlo como cualquier otro elemento:

javascript clonParrafo.textContent = 'este es un nuevo texto';

El texto del clon cambia de inmediato sin afectar al párrafo original. También podrías agregar clases, cambiar estilos o añadir atributos antes de inyectar el clon, de modo que al momento de insertarlo ya tenga su forma final [05:40].

¿Cómo reemplazar un elemento con replaceWith? [06:20]

El método replaceWith() permite sustituir un elemento del DOM por otro que tú indiques. La sintaxis es directa: se llama sobre el elemento que quieres quitar y se le pasa como argumento el elemento que ocupará su lugar.

Primero seleccionas el contenedor y el elemento específico que vas a reemplazar:

javascript const list = document.querySelector('#listArea'); const itemToReplace = list.children[2];

La propiedad children devuelve una colección de los elementos hijos directos del contenedor. Al usar corchetes con el índice 2, se accede al tercer elemento de la lista, porque los índices empiezan en cero [07:30].

¿Qué sucede cuando se ejecuta replaceWith?

Con el elemento identificado, basta una línea para hacer la sustitución:

javascript itemToReplace.replaceWith(clonParrafo);

Al ejecutar esto ocurren dos cosas importantes [08:10]:

• El tercer elemento de la lista desaparece y en su lugar queda el párrafo clonado.
• El párrafo se mueve desde su posición anterior a la nueva ubicación.

Este comportamiento es clave: cuando un nodo ya existe en el DOM y lo insertas en otra parte, no se duplica, sino que se reubica por completo. JavaScript no crea una segunda copia; traslada el nodo original de un sitio a otro.

¿Cuándo conviene clonar y cuándo reemplazar?

Ambos métodos se complementan y cubren escenarios distintos:

• Usa cloneNode(true) cuando necesites duplicar estructura y contenido para reutilizarlos.
• Usa replaceWith() cuando quieras sustituir un elemento por otro ya existente sin crear HTML nuevo.
• Recuerda que mover un nodo con append() o replaceWith() no lo clona: lo extrae de su ubicación previa.

Experimenta combinando ambos métodos en tu consola y observa cómo el DOM responde en tiempo real. Si te surge alguna duda sobre cómo se comporta la clonación profunda o el reemplazo con nodos dinámicos, compártela en los comentarios.