element.cloneNode

Resumo

Retorna a cópia de um elemento.

Syntax

dupNode = element.cloneNode(deep);

• dupNode é variavél que receberá o nó gerado
• element é o elemento pai (o elemento que contém o nó que será copiado)
• deep é uma valor boleano, obrigatório que indica de o a clone vai ser completo ou não (ver notas).

Example

p = document.getElementById("diogok"); 
p_prime = p.cloneNode(true);

Notas

Clonando um nó copiamos todos seus atributos e seus respectivos valores

O nó clonado retornado por cloneNode não faz parte do documento quando não for adicionado a um outro nó que faz parte do documento usando appendChild ou um outro método similar. Até que venha ser adicionado a um outro nó, fica sem "nó pai". Ou seja o clone não herda o pai do original.

If deep is set to false, none of the child nodes are cloned. Any text that the node contains is not cloned either, as it is contained in one or more child Text nodes.

If deep evaluates to true, the whole subtree (including text that may be in child Text nodes) is copied too. For empty nodes (e.g. IMG and INPUT elements) it doesn't matter whether deep is set to true or false but you still have to provide a value.

Note que o cloneNode pode causar o problema de termos dois elementos com um mesmo id em um documento !

Somente os eventos colocados inline em attributos são copiados. Os eventos adicionados após a renderização do nodo via javascript não são copiados.

 		var elms = document.getElementById('foo');
 		elms.onclick = function(){ 
 		  	alert('Eu não deveria ser copiado?');
 		}
 		var g = elms.cloneNode(true);
 		g.id = 'foo2';
 		g.style.top = '0px';
 		document.body.appendChild(g);

No tercho de código acima o attributo onclick não é copiado. Nem mesmo com addEventListener

Especificação

DOM Level 2 Core: cloneNode