HTML DOM Element cloneNode() Method

Definition and Usage

cloneNode() method creates a copy of the node and returns the copy.

cloneNode() method clones all properties and their values.

If you also want to clone descendants (children), please set the deep parameter to true.

Insert back

To insert the cloned node back into the document, use:

appendChild() method

insertBefore() method

See also:

adoptNode() method

importNode() method

createElement() method

createTextNode() method

Instance

Example 1

Copy the <li> element from "myList2" to "myList1":

const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

Before cloning:

  • Coffee
  • Tea
  • Water
  • Milk

After cloning:

  • Coffee
  • Tea
  • Milk
  • Water
  • Milk

Try it yourself

Example 2

Copy the "demo" element, including its 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

Syntax

node.cloneNode(deep)

Parameter

Parameter Description
deep

Optional.

  • false - Default. Only clone the node and its attributes
  • true - Clone the node, its attributes, and its descendants

Return value

Type Description
Node Object The cloned node.

Browser support

element.cloneNode() It is a DOM Level 1 (1998) feature.

All browsers fully support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support