Code has been added to clipboard!

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

Reading time 1 min
Published Jan 18, 2018
Updated Oct 2, 2019

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:

Example
$("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.

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 13/05/2021
2287 People Used
Only 92 Left
Rating
5.0