Skip to content
Related Articles

Related Articles

jQuery clone() Method

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 27 Oct, 2022
Improve Article
Save Article

The clone() method is an inbuilt method in jQuery that is used to make a copy of selected elements including its child nodes, text, and attributes.

Syntax:

$(selector).clone(true|false)

Parameters: This method accepts an optional parameter that could be either true or false specifying whether the event handler should be copied or not. 

Return Value: It returns the cloned elements for the selected element.

Example 1: In this example, the clone() method does not contain any parameters. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <!--In this example no parameter is passing
        to the clone method-->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").clone().appendTo("body");
            });
        });
    </script>
</head>
  
<body>
    <p>Welcome to</p>
    <p>GeeksforGeeks !!!</p>
    
    <!-- Click on this method and see
          the clone element-->
    <button>Click Me!</button>
</body>
  
</html>

Output:

 

Example 2: In the below code, true is passed to the clone method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    
    <!-- Here clone method is called with the
          true passed value -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("body").append($("p:first").clone(true));
            });
            $("p").click(function () {
                $(this).animate({
                    fontSize: "+=1px"
                });
            });
        });
    </script>
</head>
  
<body>
    <p>GeeksforGeeks !</p>
    <p>Hello Writer !</p>
    
    <!-- Click on this method and see 
         the clone element -->
    <button>Click Me!</button>
</body>
  
</html>

In this example, the code event handler animate will work when you click on the “GeeksforGeeks” and this will also reflect on the cloned elements. 

Output: 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!