.clone() JQ Home  <<  Utilities  <<  .clone()

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

Signature Description
.clone( [withDataAndEvents] [, deepWithDataAndEvents] )Create a deep copy of the set of matched elements, optionally passing booleans flags to indicate whether event handlers and data should be copied and/or event handlers and data for all children of the cloned element should be copied.

Parameters

Parameter Description Type
withDataAndEventsA Boolean indicating whether event handlers and data should be copied along with the elements.
default: false.		Boolean
deepWithDataAndEventsA Boolean indicating whether event handlers and data for all children of the cloned element should be copied.
default value matches withDataAndEvents value - which defaults to false.		Boolean

Return

A jQuery object.

.clone( [withDataAndEvents] [, deepWithDataAndEvents] ) ExamplesUtilities  <<  Top

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'); 
   });
});

class of 'para1clone' inside class of 'div1clone'.

Press the button below to action the above code:

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'); 
   });
});

class of 'para2clone' inside class of 'div2clone'.

Press the button below to action the above code:

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'); 
   });
});

class of 'para3clone' inside class of 'div3clone'.

Press the button below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 10 - jQuery Copy, Data & Type Utilities