Using jQuery .clone(): What Does a Deep Copy Mean and How to Make One

jQuery clone: Main Tips

• The .clone() jQuery method makes a deep copy of the specified elements.
• A deep copy contains not only the elements themselves, but also all their children elements and text nodes.

How to Clone Elements

The .clone() jQuery method clones the selected elements by creating a deep copy of them. Try clicking the button in the example multiple times and compare the results:

$("button").click(() => {
    $("p").clone().appendTo("div");
});

To make jQuery clone elements, you will need to use this syntax:

$(selector).clone(withEventsAndData, deepWithEventsAndData);

Both parameters are optional. They also both have boolean values.

• withEventsAndData specifies whether the data and event handlers associated with the element should be copied as well. It is false by default.
• deepWithEventsAndData specifies whether the data and event handlers of the selected element's children should be copied as well. Their values match that of the first element by default.

Note: avoid making jQuery clone elements that have ID attributes. Dublicating them will casue issues, as ID attributes must be unique for identification purposes.