How to make an exact copy of an element?

* deep copy

// Node.cloneNode()
var elem = document.querySelector("#node1");

// optional boolean argument, deep
// true -> the child elements (including text nodes) are copied, too
var copy = elem.cloneNode(true);

// modify the id
copy.id = 'node2';
//insert into the DOM before the original
elem.parentNode.insertBefore(copy, elem);

 

* shallow copy

// cloneNode(false) -> no child nodes are copied
// but with all of the ids, classes, and other attributes still on it
// make a shallow copy
var copy = elem.cloneNode(); // same as "false" argument
elem.parentNode.insertBefore(copy, elem);

 

source : [Go Make Things]