HTML DOM Element cloneNode()
Example
Copy a <li> element from "myList2" to "myList1":
const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);
Before:
- Coffee
- Tea
- Water
- Milk
After:
- Coffee
- Tea
- Milk
- Water
- Milk
More examples below.
Definition and Usage
The cloneNode() method creates a copy of a node, and returns the clone.
The cloneNode() method clones all attributes and their values.
Set the deep parameter to true if you also want to clone descendants (children).
Insert Back
To insert a cloned node back into the document, use:
See Also:
Syntax
node.cloneNode(deep)
Parameters
| Parameter | Description |
| deep | Optional.false - Default. Clone only the node and its attributes.true - Clone the node, its attributes, and its descendants. |
Return Value
| Type | Description |
| Node | The cloned node. |
More Examples
Example
Copy the "demo" element, including attributes and child elements, and append it to the document:
const node = document.getElementById("demo");
const clone = node.cloneNode(true);
document.body.appendChild(clone);
Try it Yourself »
Browser Support
element.cloneNode() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |
