JavaScript cloneNode
last modified April 2, 2025
In this article, we explore the cloneNode method in JavaScript.
This method is essential for DOM manipulation, allowing developers to create
copies of existing DOM elements.
Basic Definition
The cloneNode method creates a copy of a DOM element. It accepts
one boolean parameter that determines whether to clone all child nodes or not.
When true is passed, it performs a deep clone including all child
nodes. When false, it only clones the element itself without
children. The default value is false.
Basic cloneNode Example
This example demonstrates how to clone a simple div element and append it.
<!DOCTYPE html>
<html>
<head>
<title>Basic cloneNode</title>
</head>
<body>
<div id="original">Original Element</div>
<button onclick="cloneElement()">Clone Element</button>
<script>
function cloneElement() {
const original = document.getElementById('original');
const clone = original.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
In this basic example, we have a div element with the ID "original". The
JavaScript code clones this element using cloneNode(true) and
appends the clone to the document body.
This demonstrates the fundamental usage of cloneNode to duplicate
elements. The true parameter ensures all child nodes are cloned.
Shallow vs Deep Cloning
This example shows the difference between shallow and deep cloning.
<!DOCTYPE html>
<html>
<head>
<title>Shallow vs Deep</title>
</head>
<body>
<div id="parent">
Parent Element
<div>Child Element</div>
</div>
<button onclick="cloneShallow()">Shallow Clone</button>
<button onclick="cloneDeep()">Deep Clone</button>
<script>
function cloneShallow() {
const parent = document.getElementById('parent');
const clone = parent.cloneNode(false);
document.body.appendChild(clone);
}
function cloneDeep() {
const parent = document.getElementById('parent');
const clone = parent.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
Here we have a parent element with a child element. The cloneShallow
function performs a shallow clone while cloneDeep does a deep clone.
The shallow clone (false) only copies the parent element without
its children. The deep clone (true) copies both the parent and all
its child nodes.
Cloning with Event Listeners
This example demonstrates how event listeners behave with cloned elements.
<!DOCTYPE html>
<html>
<head>
<title>Cloning Events</title>
</head>
<body>
<button id="originalBtn">Original Button</button>
<button onclick="cloneButton()">Clone Button</button>
<div id="output"></div>
<script>
const originalBtn = document.getElementById('originalBtn');
originalBtn.addEventListener('click', function() {
document.getElementById('output').textContent =
'Original button clicked!';
});
function cloneButton() {
const clone = originalBtn.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
In this example, we have a button with an event listener and another button to clone it. The cloned button won't have the original's event listeners.
This shows that cloneNode only clones the DOM structure and
attributes. Event listeners added with addEventListener are not
copied to the cloned element.
Cloning Form Elements
This example shows how to clone form elements while preserving their values.
<!DOCTYPE html>
<html>
<head>
<title>Cloning Forms</title>
</head>
<body>
<form id="originalForm">
<input type="text" value="Initial value">
<input type="checkbox" checked>
</form>
<button onclick="cloneForm()">Clone Form</button>
<script>
function cloneForm() {
const form = document.getElementById('originalForm');
const clone = form.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
Here we have a form with a text input and checkbox. The cloneForm
function clones the entire form including its current state.
This demonstrates that cloneNode preserves the current values and
states of form elements when they are cloned. The cloned form will maintain all
attribute values from the original.
Cloning with Custom Attributes
This example shows how custom data attributes are handled during cloning.
<!DOCTYPE html>
<html>
<head>
<title>Custom Attributes</title>
</head>
<body>
<div id="customDiv" data-info="important data">Element with custom data</div>
<button onclick="cloneCustom()">Clone Custom</button>
<script>
function cloneCustom() {
const div = document.getElementById('customDiv');
const clone = div.cloneNode(true);
// Modify the clone's data attribute
clone.dataset.info = 'cloned data';
document.body.appendChild(clone);
// Log both elements' data attributes
console.log('Original:', div.dataset.info);
console.log('Clone:', clone.dataset.info);
}
</script>
</body>
</html>
In this example, we clone an element with a custom data attribute and then modify the clone's attribute. Both elements' attributes are logged to console.
This shows that cloneNode copies all attributes, including custom
data attributes. The cloned element is completely independent from the original,
allowing modifications without affecting the source element.
Source
In this article, we have shown how to use the cloneNode method in
JavaScript. This method is powerful for creating copies of DOM elements while
maintaining their structure and attributes.
Author
List all JS DOM tutorials.