Home > Developer > Web Develop
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 cloningThe use of this is so simple that using clones we need to know extra details:
<!DOCTYPE HTML><HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title></title> <Scriptsrc= "Http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
