Deep understanding of DOM copy clone () and deep dom copy clone

Deep understanding of DOM copy clone () and deep dom copy clone

A clone node is a common DOM operation. jQuery provides a clone method to process dom cloning:

The. clone () method deeply copies all matching element sets, including all matching elements, the lower-level elements of matching elements, and the text nodes.

The clone method is simple to clone a node, but you must note that if the node has other processing tasks such as events or data, we need to pass a Boolean value ture Through clone (ture) to specify, in this way, we not only clone the node structure, but also clone the events and data.

For example:

HTML <div> </div> JavaScript section $ ("div "). on ('click', function () {// execute Operation}) // clone to process 1 $ ("div "). clone () // only cloned structure, event loss // clone process 2 $ ("div "). clone (true) // structure, events, and data are cloned

The usage is as simple as this. We need to know the details when cloning:

• When using the clone () method, before inserting it into a document, we can modify the cloned element or element content, such as the code on the right side: this(.clone().css ('color', 'red ') added a color.
• Pass true to copy all event handlers bound to the original element to the cloned element.
• The clone () method is extended by jQuery and can only process events and data bound by jQuery.
• Objects and arrays in element data will not be copied, And the cloned elements and original elements will continue to be shared. For all data that is deeply copied, You need to manually copy each

Case Analysis:

<! DOCTYPE html>