Teoría
Teoría

La clonación profunda con cloneNode(true)

Con false, cloneNode copia el elemento sin sus nodos hijos. Con true, copia el elemento con todos sus descendientes, incluidos sus atributos, clases y texto. Esto se llama clonación profunda.

Si no pasamos ningún argumento, el método hace una copia superficial, igual que con false: no incluye los nodos hijos.

Podemos escribir el valor booleano de forma explícita para dejar claro qué tipo de copia necesitamos.

element.cloneNode(true);  // Copia el elemento con todos sus descendientes
element.cloneNode();      // Copia el elemento sin nodos hijos

Veamos la clonación profunda en la práctica. Copiemos el elemento de la plantilla, agreguemos texto a su hijo e insertemos la copia en la página.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Clonación de elementos</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="pool"> <div class="el"> <span>1</span> </div> <div class="el"> <span>2</span> </div> </div> <template id="element-template"> <div class="el"> <span></span> </div> </template> <script src="script.js"></script> </body> </html>

CSS

.pool { display: flex; flex-wrap: wrap; min-height: 330px; margin: 20px; padding: 10px; background-color: #e9e9f0; } .el { display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; margin-right: 10px; margin-bottom: 10px; box-sizing: border-box; border: 20px solid #3366ff; background-color: #99b2ff; color: rgba(255, 255, 255, 0.9); font: bold 60px "Arial", sans-serif; text-align: center; } .el--green { background-color: #a3d095; border: 20px solid #518d3f; }

JavaScript

// Contenedor de las tarjetas var pool = document.querySelector('.pool'); // Obtenemos la plantilla de la tarjeta var template = document.querySelector('#element-template').content; var element = template.querySelector('div'); // Clonamos el elemento var clonedElement = element.cloneNode(false); // Agregamos el número a span // clonedElement.children[0].textContent = 3; console.log(clonedElement);

ObjetivosRealizado

En la línea que clona el elemento, sustituye false por true y revisa la consola.
Descomenta la línea que agrega un número a span.
Después de la salida a la consola, agrega clonedElement al final de pool.