The JavaScript cloneNode() method allows you to copy an HTML element rendered on the browser and place it on another part of your website.
It offers you the convenience of duplicating a complex HTML element and modify just what you need rather than creating the same element from scratch.
The method accepts one optional boolean parameter specifying whether you want to “deep clone” the element or not:
Element.cloneNode(deepClone);
Let’s see an example of what cloneNode() method can do for you next.
The cloneNode() method in action
Suppose you have the following HTML <body> structure:
<body>
<div id="first">
<h1 class="header">First Header</h1>
<p class="paragraph">First paragraph</p>
</div>
<div id="second">
<h1 class="header">Second Header</h1>
</div>
</body>
You’d like to have the same <p> tag inside the <div id="second"> element, so you select the <p> element using querySelector() method and append it to the second <div> as shown below:
let firstP = document.querySelector("#first .paragraph");
let secondH = document.querySelector("#second");
secondH.appendChild(firstP);
But the appendChild() method would move the firstP element out from the first <div> to the second one:
<body>
<div id="first">
<h1 class="header">First Header</h1>
</div>
<div id="second">
<h1 class="header">Second Header</h1>
<p class="paragraph">First paragraph</p>
</div>
</body>
Now the first <div> element doesn’t have the <p> tag as its child. To copy the <p> tag instead of moving it, you need to call the cloneNode() method on the <p> element itself.
After retrieving the element, call the cloneNode() method as follows:
let firstP = document.querySelector("#first .paragraph");
cloneP = firstP.cloneNode();
Now you can add the cloned element to the second <div> with appendChild() method:
let firstP = document.querySelector("#first .paragraph");
cloneP = firstP.cloneNode();
let secondH = document.querySelector("#second");
secondH.appendChild(cloneP);
This way, both <div> elements would have a <p> tag as their child:
<body>
<div id="first">
<h1 class="header">First Header</h1>
<p class="paragraph">First paragraph</p>
</div>
<div id="second">
<h1 class="header">Second Header</h1>
<p class="paragraph"></p>
</div>
</body>
You may notice that the second <p> tag is empty. This is because the cloneNode() method clones only the element and its attributes like class, name, or id.
If you want to copy everything inside the element, you need to deep clone the element by passing true as its argument during the method call:
let firstP = document.querySelector("#first .paragraph");
cloneP = firstP.cloneNode(true);
With the deepClone parameter set to true, the cloneNode() method will copy everything inside the element that you call it from. This is especially useful when you’re cloning an element with many child elements like an ul list element.
The cloned element is a perfecly valid regular HTML element object, so you can change its properties like innerText or innerHTML and call on the setAttribute() method to set its attributes as you require.
What you do with the cloned element is up to you.