.clone()

Syntax and Description

.clone([withEvents])

makes copies of elements.

withEvents (optional) is a boolean indicating whether event handlers should be copied along with the elements. Return value is a new jQuery object referencing the created elements.

Adds a cloned element to a paragraph

The following code clones the b element and then insert it to the paragraph.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  www .  j a  v a2s  .  co  m-->
              $("b").clone().prependTo("p");
        });
    </script>
  </head>
  <body>
    <body>
       <b>Hello</b><p>, how are you?</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Append a cloned tag

The following code adds cloned tag. It first creates a clone of a paragraph tag. Then it adds a hard coded span element to the cloned paragraph tag. Finally it appends them to the body element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  www  .  j  a  va  2  s.c om-->
           $("p").clone().add("<span>Again</span>").appendTo(document.body);
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
          <p>Hello ja v a2s.com</p>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Append clone to document body

The following code clones a paragraph and then adds it to the document body.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- ww w. jav a  2s .c  o  m-->
           $("p").clone().appendTo(document.body);
        });
    </script>
  </head>
  <body>
    <body>
          <p>java 2s.com</p>
  </body>
</html>

Click to view the demo

The code above generates the following result.