Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

jQuery clone() Method

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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
Last Updated : 27 Oct, 2022
Like Article
Save Article
Similar Reads