The .clone()
method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. For performance reasons, the dynamic state of form elements (e.g., user data typed into input
, and textarea
or user selections made to a select
) is not copied to the cloned elements. The clone operation sets these fields to their default values as specified in the HTML.
The .clone()
method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea
and user selections made to a select
) is not copied to the cloned elements. When cloning input
elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.
When used in conjunction with one of the insertion methods, .clone()
is a convenient way to duplicate elements on a page. Consider the following HTML:
<div class="container">