码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM Element cloneNode()

❮ Previous ❮ Element Object Reference Next ❯

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
Try it Yourself »

More examples below.

Description

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:

The appendChild() Method

The insertBefore() Method

See Also:

The adoptNode() Method

The importNode() Method

The createElement() Method

The createTextNode() Method

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 Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11
❮ Previous ❮ Element Object Reference Next ❯