The shallow cloning and deep cloning of jquery

Source: Internet
Author: User
Tags shallow copy

Cloning nodes is a common dom operation, and JQuery provides a clone method that is designed to handle the cloning of the DOM

The. Clone () method deeply copies all matching element collections, including all matching elements, subordinate elements of matching elements, and literal nodes.

The Clone method is relatively simple is the cloning node, but it should be noted that if the node has events or other processing data, we need to pass a Boolean value through Clone (ture) ture used to specify , so not only to clone the simple node structure, And we're going to clone the accompanying incident with the data.

For example:

The HTML section <div></div>javascript part $ ("div"). On (' click ', function () {///Perform action})//clone process a $ ("div"). Clone ()   //Clone only structure, event loss//clone processing two $ ("div"). Clone (TRUE)//structure, event and data cloning

The use of this is so simple that using clones we need to know extra details:

    • Clone () method, before inserting it into a document, we can modify the cloned element or element content, such as the right code I $ (this). Clone (). CSS (' Color ', ' red ') adds a color
    • Copies all event handlers bound on the original element to the cloned element by passing true
    • The Clone () method is a jquery extension that only handles events and data that are bound by jquery
    • The objects and arrays within the element data are not copied and will continue to be shared by the cloned element and the original element. Deep copy of all the data, you need to manually copy each
<!DOCTYPE HTML><HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <title></title>    <Scriptsrc= "Http://"></Script>    <style>. Left,. Right{width:300px;Height:120px;    }. Left Div,. Right Div{width:100px;Height:90px;padding:5px;margin:5px;float: Left;Border:1px solid #ccc;background:#bbffaa;    }    </style></Head><Body>    <H2>Cloning elements through clone</H2>    <Divclass= "Left">        <Divclass= "Aaron1">Click, Clone Shallow copy</Div>        <Divclass= "Aaron2">Click, Clone deep Copy, can continue to trigger create</Div>    </Div>    <Scripttype= "Text/javascript">        //Clone nodes only        //do not clone events        $(". Aaron1"). On ('Click', function() {            $(". Left"). Append ($ ( This). Clone (). CSS ('Color','Red') )        })    </Script>    <Scripttype= "Text/javascript">        //Clone node        //Cloning Events        $(". Aaron2"). On ('Click', function() {Console.log (1)            $(". Left"). Append ($ ( This). Clone (true). CSS ('Color','Blue') )        })    </Script></Body></HTML>

The shallow cloning and deep cloning of jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.