HTML DOM cloneNode() Method

cloneNode()The function of the method is: return a copy of the node that calls this method.

cloneNode() method clones all properties and their values.

UseappendChild()orinsertBefore()The method inserts the cloned node into the document.

Note: cloneNode() may cause duplicate element IDs in the document.

Syntax:

node.cloneNode(deep)

Example

var node = document.querySelector("#box").firstElementChild;
var copy = node.cloneNode(true);
document.getElementById("result").appendChild(copy);

All browsers fully support the cloneNode() method:

Method
cloneNode()	Yes	Yes	Yes	Yes	Yes

Parameter	Description
deep	(Optional) Specify whether all descendants of the node should be cloned Possible Values: True -The cloned node, its attributes, and its descendants False -Only clone the node and its attributes (default).

Return Value:	A Node object representing the cloned node
DOM Version:	DOM Level1

Copy a DIV element (including all its attributes and child elements) and append it to the document:

Example

var node = document.querySelector("#box");
var copy = node.cloneNode(true);
document.body.appendChild(copy);