Let’s get to it!
cloneNode() method creates a copy of an element.
For example, let’s say you had a paragraph with an ID and a class on it, like this.
<p id="node1" class="text-blue">Hello, world!</p>
First, get the element in the DOM (using
querySelector() or some other method).
Then, you can call the
cloneNode() method on it. The
cloneNode() method accepts an optional boolean argument,
deep. If true, the child elements (including text nodes) are copied, too.
// The original var elem = document.querySelector('#node1'); // The copy var copy = elem.cloneNode(true);
Then, you can modify it however you want. In our case, we’ll change the ID, then insert it into the DOM before the original.
// Modify the ID copy.id = 'node2'; // Insert into the DOM elem.parentNode.insertBefore(copy, elem);
If you leave the optional
deep argument empty (or set it to
false), no child nodes are copied.
That includes text nodes. Using our example from before, that means that the result would be an empty paragraph, but with all of the IDs, classes, and other attributes still on it.
// Make a shallow copy var copy = elem.cloneNode(); // Insert into the DOM elem.parentNode.insertBefore(copy, elem);
cloneNode() method works in all modern browsers, and back to at least IE 6.