Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to clone a block using jQuery ?

  • Last Updated : 29 Sep, 2021

Clone method in jQuery performs a deep copy of a set of matching elements. You can create a copy of the data as well as a copy of the event handlers.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$(selector).clone(true|false)

Parameters Value:

  • True specifies that the event handlers should also be copied
  • False(Default) species that the event handlers should not be copied.

Example 1: In this example, we are not passing any value to the clone method.



 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
    </script>
      
    <style>
        #info {
            justify-content: center;
            width: 50%;
        }
  
        #container {
            border: 4px outset red;
            background-color: lightblue;
            justify-content: center;
            width: 50%;
        }
  
        #btn {
            background-color: #4CAF50;
            color: white;
            padding: 15px 32px;
            text-align: center;
            display: inline-block;
            font-size: 16px;
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#info").clone().appendTo("#container");
            });
        });
    </script>
</head>
  
<body>
    <div id="info">
        <h4>Clone() method<h4>
          
        <p>
            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.
        </p>
    </div>
  
    <button id="btn"> Learn More</button>
    <br><br>
      
    <div id="container">
        <h3> Result </h3>
    </div>
</body>
  
</html>

Output:

Example 2: In this example, we are passing “true” value to the clone method that copies the event handlers also. Here we are changing the background color of the paragraph whenever the user clicks the paragraph. This will be copied as you can see in the output.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
    </script>
  
    <style>
        body {
            background-color: lightblue;
        }
  
        #main {
            text-align: center;
            margin: 20px 300px;
            padding: 10px;
            background-color: #00b3b3;
            display: inline-block;
            position: absolute;
        }
  
        button {
            padding: 20px;
            font-size: 30px;
            margin-top: 05px;
        }
  
        p {
            padding: 10px;
            font-size: 28px;
        }
    </style>
      
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("body").append($("p:first").clone(true));
            });
  
            $("p").click(function () {
                $(this).css("background-color", "yellow");
            });
  
        });
    </script>
</head>
  
<body>
    <div id="main">
        <button id="clone"> Clone </button>
    </div>
  
    <p>Clone method example</p>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!