jQuery: The Write Less, Do More JavaScript Library

Manipulation/clone

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

clone( )

Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.

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

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("b").clone().prependTo("p");
  });
  </script>
  
</head>
<body>
  <b>Hello</b><p>, how are you?</p>
</body>
</html>

NameType

[edit]

clone( true )

Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.
Arguments:
trueBoolean
Set to true to enable cloning of event handlers.

Examples:
Create a button that's able to clone itself - and have the clones themselves be clonable.

    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

  });
  </script>
  
</head>
<body>
  <button>Clone Me!</button>
</body>
</html>

NameType

Retrieved from "http://docs.jquery.com/Manipulation/clone"