.clone()

jQuery

previous page next page

.clone()

Categories: Manipulation > Copying

.clone( [withDataAndEvents ] ) Returns: jQuery

Description: Create a deep copy of the set of matched elements.

  • version added: 1.0.clone( [withDataAndEvents ] )

    • withDataAndEvents (default: false)
      Type: Boolean
      A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

  • version added: 1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

    • withDataAndEvents (default: false)
      Type: Boolean
      A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false. *In jQuery 1.5.0 the default value was incorrectly true; it was changed back to false in 1.5.1 and up.
    • deepWithDataAndEvents (default: value of withDataAndEvents)
      Type: Boolean
      A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, .clone() is a convenient way to duplicate elements on a page. Consider the following HTML:

1
2
3
4
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="hello">Hello</div>
                                  

                                

                                

                                  

                                      <div class="goodbye">Goodbye</div>
                                  

                                

                                

                                  

                                    
                                      </div>

As shown in the discussion for .append(), normally when an element is inserted somewhere in the DOM, it is moved from its old location. So, given the code:

1
 
                                

                                  

                                    $('.hello').appendTo('.goodbye');

The resulting DOM structure would be:

1
2
3
4
5
6
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="goodbye">
                                  

                                

                                

                                  

                                        Goodbye
                                  

                                

                                

                                  

                                        <div class="hello">Hello</div>
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                    
                                      </div>

To prevent this and instead create a copy of the element, you could write the following:

1
 
                                

                                  

                                    $('.hello').clone().appendTo('.goodbye');

This would produce:

1
2
3
4
5
6
7
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="hello">Hello</div>
                                  

                                

                                

                                  

                                      <div class="goodbye">
                                  

                                

                                

                                  

                                        Goodbye
                                  

                                

                                

                                  

                                        <div class="hello">Hello</div>
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                    
                                      </div>

Note: When using the .clone() method, you can modify the cloned elements or their contents before (re-)inserting them into the document.

Normally, any event handlers bound to the original element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the .data() method) is also copied to the new copy.

However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:

1
2
3
 
                                

                                  

                                    var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
                                  

                                

                                

                                  

                                        $clone = $elem.clone( true )
                                  

                                

                                

                                  

                                        .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

As of jQuery 1.5, withDataAndEvents can be optionally enhanced with deepWithDataAndEvents to copy the events and data for all children of the cloned element.

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

Examples:

Example: Clones all b elements (and selects the clones) and prepends them to all paragraphs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <b>Hello</b><p>, how are you?</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                        $("b").clone().prependTo("p");
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: When using .clone() to clone a collection of elements that are not attached to the DOM, their order when inserted into the DOM is not guaranteed. However, it may be possible to preserve sort order with a workaround, as demonstrated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        #orig, #copy, #copy-correct {
                                    

                                  

                                  

                                    

                                          float: left;
                                    

                                  

                                  

                                    

                                          width: 20%;
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div id="orig">
                                      
                                    

                                  

                                  

                                    

                                          <div class="elem"><a>1</a></div>
                                    

                                  

                                  

                                    

                                          <div class="elem"><a>2</a></div>
                                    

                                  

                                  

                                    

                                          <div class="elem"><a>3</a></div>
                                    

                                  

                                  

                                    

                                          <div class="elem"><a>4</a></div>
                                    

                                  

                                  

                                    

                                          <div class="elem"><a>5</a></div>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div id="copy">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div id="copy-correct">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      
                                        // sort order is not guaranteed here and may vary with browser
                                      
                                    

                                  

                                  

                                    

                                      $('#copy').append($('#orig .elem')
                                    

                                  

                                  

                                    

                                                .clone()
                                    

                                  

                                  

                                    

                                                .children('a')
                                    

                                  

                                  

                                    

                                                .prepend('foo - ')
                                    

                                  

                                  

                                    

                                                .parent()
                                    

                                  

                                  

                                    

                                                .clone());
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        // correct way to approach where order is maintained
                                      
                                    

                                  

                                  

                                    

                                      $('#copy-correct')
                                    

                                  

                                  

                                    

                                                .append($('#orig .elem')
                                    

                                  

                                  

                                    

                                                .clone()
                                    

                                  

                                  

                                    

                                                .children('a')
                                    

                                  

                                  

                                    

                                                .prepend('bar - ')
                                    

                                  

                                  

                                    

                                                .end());
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page