jQuery clone() Method

Last Updated Jul 21, 2015, 12:00:06 PM

jQuery clone() Method

jQuery clone() method performs a deep copy of the selected element in the DOM tree. Meaning it copies the selected elements and creates a copy of it in the DOM tree.


This method accepts one or more class names as a parameter. In which, if an element already has a class in the equivalent element, then it will remove the items, or if an element doesn’t have a class then it simply adds that element to the DOM.


In the above HTML we have three div elements which are styled as square boxes. If you click on any square box, what will happen is, it will create a clone of the current HTML div element and then it will insert the cloned copy after that current element.


The above jquery clone() method will produce the following output

jQuery clone() method
Try It Now

jQuery DOM Reference

Other Advanced jQuery and DOM topics you might want to learn

jQuery Basic DOM Methods

jQuery DOM Removal

jQuery DOM Insertion Inside

jQuery DOM Insertion Outside

jQuery DOM Insertion Around

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM