Logo dom
W3Api

Node.cloneNode() | Dom

 
  • Modificado: 27 Sep 2023

Descripción

El método .cloneNode() genera una réplica del nodo sobre el que se ejecuta la clonación. Mediante el parámetro del método podemos indicar si queremos clonar el árbol del nodo o no.

Sintaxis

cloneNode()
cloneNode(deep)

Parámetros

  • deep, en el caso de que el valor sea true clonará los nodos hijo del nodo sobre el que realizamos el clonado. Si el valor es false solo clonará el nodo indicado en el clonado.

Objeto Padre

Node

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Templates HTML5</title>
</head>
<body>

	<h1>Templates HTML5</h1>

	<table id="ciudades">
	  <thead>
	    <tr>
	      <td>Ciudad</td>
	      <td>País</td>    
	    </tr>
	  </thead>
	  <tbody>
	
	  </tbody>
	</table>

	<template id="ciudad">
	  <tr>
	    <td class="record"></td>
	    <td></td>
	  </tr>
	</template>

<script>
if ('content' in document.createElement('template')) {
    
    const tbody = document.querySelector("tbody");
    const template = document.querySelector("#ciudad");

    // Clona la plantilla
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "Barcelona";
    td[1].textContent = "Spain";

    tbody.appendChild(clone);

    // Clona nuevamente la plantillax11
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "Paris";
    td[1].textContent = "Francia";

    tbody.appendChild(clone2);
}
</script>

</body>
</html>

Artículos