.clone()S2C Home « Utilities « .clone()

• <<    jQuery.support
• .data()     >>

Deep copy creation.

Description

The .clone() jQuery Copy utility method, creates a deep copy of the set of matched elements.

• The .clone() method creates a deep copy of the matched set - ( all descendant elements and text nodes are copied along with the matched set ).
• The .clone() method is a convenient way to duplicate elements on a page when used with one of the jQuery insertion methods.
• The .clone() method is for cloning DOM elements, not JavaScript objects which you should use the jQuery.extend() method for instead.
• Using the .clone() method has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Avoid cloning elements with the id attribute or if absolutely necessary ensure elements that might be cloned are coded using the class attribute identifier instead.

Syntax

Parameters

Return

A jQuery object.

.clone([withDataAndEvents][,deepWithDataAndEvents]) ExamplesTop

Create a deep copy of the set of matched elements.

In the example below when we press the button the first time we clone the 'div1clone' element and append it to itself. We are not setting any optional flags so it is just a straight clone. If you click on the cloned 'div1clone' or 'para1clone' elements after clicking the button the outer 'div1clone' colour changes. This is because it is just a straight clone without any event handlers or data being copied over. Therefore when you click the cloned 'div1clone' or 'para1clone' elements it is just the same as clicking the original 'div1clone' element.

$(function(){
   $('.div1clone').on('click', function(){
     $(this).toggleClass('redbg');
   });
   $('.para1clone').on('click', function(){
     $(this).toggleClass('olivebg');
   });
   $('#btn8').one('click', function(){
     $('.div1clone').clone()
               .appendTo('.div1clone'); 
   });
});

Create a deep copy of the set of matched elements, passing a boolean flag to also clone event handlers and data for the cloned element but not for children of the cloned element.

In the example below when we press the button the first time we clone the 'div2clone' element and append it to itself. We are setting the optional withDataAndEvents flag to true, so any event handlers for the 'div2clone' element get copied along with the element. If you click on the cloned 'div2clone' or 'para2clone' elements after clicking the button the inner 'div2clone' colour changes without affecting the outer 'div2clone' element. This is because event handlers and data have been copied over. Therefore when you click the cloned 'div2clone' or 'para2clone' elements we are using cloned event handlers and data for the 'div2clone' cloned element.

$(function(){
   $('.div2clone').click(function () {
     $(this).toggleClass('cyanbg');
   });
   $('.para2clone').click(function () {
     $(this).toggleClass('yellowbg');
   });
   $('#btn9').one('click', function(){
     $('.div2clone').clone(true, false)
               .appendTo('.div2clone'); 
   });
});

Create a deep copy of the set of matched elements, passing a boolean flag to also clone event handlers and data for the cloned element and for all children of the cloned element.

In the example below when we press the button the first time we clone the 'div3clone' element and append it to itself. We are setting the optional withDataAndEvents and deepWithDataAndEvents flags to true, so any event handlers for the 'div3clone' and 'para3clone' element get copied along with the element. If you click on the cloned 'div3clone' elements after clicking the button the inner 'div3clone' colour changes without affecting the outer 'div3clone' element. If you click on the cloned 'para3clone' element after clicking the button the inner 'para3clone' colour changes without affecting the outer 'para3clone' element. This is because event handlers and data have been copied over, including event handlers and data for all children of the cloned element. Therefore when you click the cloned 'div3clone' or 'para3clone' elements we are using cloned event handlers and data for the 'div3clone' and 'para3clone' cloned elements.

$(function(){
   $('.div3clone').click(function () {
     $(this).toggleClass('yellowbg');
   });
   $('.para3clone').click(function () {
     $(this).toggleClass('limebg');
   });
   $('#btn10').one('click', function(){
     $('.div3clone').clone(true, true)
               .appendTo('.div3clone'); 
   });
});

• <<    jQuery.support
• .data()     >>