Teoría
Teoría

Clonar elementos con cloneNode(false)

Insertamos el elemento de la plantilla, después otro elemento y luego intentamos insertar el primero otra vez. El elemento de la plantilla aparece una sola vez y queda al final del bloque. ¿Por qué?

Porque sigue siendo el mismo elemento, aunque lo usemos como plantilla. No puede ocupar varios lugares de la página a la vez. Nosotros tampoco podemos estar en varios sitios al mismo tiempo, ¿verdad? Pues los elementos del DOM tampoco.

Para eso existe la clonación. Podemos clonar cualquier elemento, incluidos los que usamos como plantillas, e insertar sus copias tantas veces como queramos.

Para clonar usamos el método cloneNode, que devuelve una copia del nodo.

Este método recibe un argumento booleano. Si pasamos false, copia el propio elemento con sus clases y atributos, pero sin sus nodos hijos.

element.cloneNode(false); // Devuelve una copia sin nodos hijos

Probemos a clonar el elemento con false y a insertar esa copia en la página.

En el siguiente ejercicio veremos qué pasa con true y sin argumento. Spoiler: ¡las copias no siempre traen todo lo que esperas!

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);

ObjetivosRealizado

Descomenta la línea que clona el elemento.
Muestra clonedElement en la consola.
Inserta clonedElement al final de pool.