Consejo: utilice el método appendChild() o insertBefore() para insertar el nodo clonado en el documento.
Consejo: establezca el valor del parámetro profundo en verdadero si desea clonar todos los descendientes (hijos); de lo contrario, sea falso.

Sintaxis

var dupNode = node.cloneNode(deep);

Parámetros

node El nodo que se desea clonar.
dupNode El nuevo nodo que será un clon de node
deep Opcional true si los hijos del nodo también deben ser clonados, o false para clonar únicamente al nodo.

Ejemplo

Copie un elemento <div>, incluidos todos sus atributos y elementos secundarios, y añádalo al documento:

<!DOCTYPE html>
<html>
<body>
<div style="border:1px solid black;background-color:pink">
  <p style="color:red;">Un p elemento</p>
  <p style="color:green;">Un p elemento</p>
  <p style="color:blue;">Un p elemento</p>
</div>
<p>Haga click en el botón para copiar el elemento div de arriba, incluidos todos sus atributos y elementos secundarios, y agregarlo al documento.</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
  var elmnt = document.getElementsByTagName("DIV")[0];
  var cln = elmnt.cloneNode(true);
  document.body.appendChild(cln);
}
</script>
</body>
</html>

Ver ejemplo anterior

Si queremos hacer una copia idéntica de un nodo y ubicarlo en otra parte del árbol, podemos utilizar el método:

cloneNode(<true o false> )

Si le pasamos como parámetro el valor true, hará una copia del nodo y todos sus descendientes; en caso de pasarle false sólo hará una copia de dicho nodo.

Confeccionaremos un ejemplo que se clone un div que contiene tres hipervínculos:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
var orden=1;
function clonarNodos()
{
  var id=document.getElementById("enlaces");
  var nuevos=id.cloneNode(true);
  nuevos.style.id='enlaces'+orden;
  orden++;
  id=document.getElementById("enlacesnuevos");
  id.appendChild(nuevos);
}
</script>
</head>
<body>
<div id="enlaces">
<a href="#">Enlace 1</a><br>
<a href="#">Enlace 2</a><br>
<a href="#">Enlace 3</a><br>
</div>
<input type="button" onclick="clonarNodos()" value="Clonar nodos">
<div id="enlacesnuevos">
</div>
</body>
</html>

Ver ejemplo anterior

El código Javascript:

var orden=1;
function clonarNodos()
{
  var id=document.getElementById("enlaces");
  var nuevos=id.cloneNode(true);
  nuevos.style.id='enlaces'+orden;
  orden++;
  id=document.getElementById("enlacesnuevos");
  id.appendChild(nuevos);
}

En la función de clonar nodos debemos tener algunas consideraciones:
Como pasamos true al parámetro del método cloneNode se crea una copia idéntica del nodo y de todos sus descendientes (la llamada del método se hace a partir del objeto que queremos clonar):

  var id=document.getElementById("enlaces");
  var nuevos=id.cloneNode(true);

Ahora es importante tener en cuenta que los nodos clonados tienen el mismo valor en la propiedad id por lo que debemos modificársela:

  nuevos.style.id='enlaces'+orden;
  orden++;

Por último, obtenemos la referencia del div donde se insertará este subárbol:

  id=document.getElementById("enlacesnuevos");
  id.appendChild(nuevos);

(adsbygoogle = window.adsbygoogle || []).push({});

Clonación de un nodo (cloneNode)