How to clone a block using jQuery ? Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to clone a block using jQuery. The 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. Whenever we are building a dynamic website then this method is very efficient and time-saving. Syntax:$(selector).clone(true|false)Parameters Value:True specifies that the event handlers should also be copiedFalse(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= "https://code.jquery.com/jquery-1.12.0.min.js"> </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= "https://code.jquery.com/jquery-1.12.0.min.js"> </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: Comment More infoAdvertise with us Next Article How to Wrap an Element with Another Div Using jQuery? N namaldesign Follow Improve Article Tags : JQuery CSS-Properties jQuery-Methods HTML-Questions jQuery-Questions +1 More Similar Reads How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) 2 min read How to create clone of any object using jQuery ? In this article, we will learn to create a clone of an object using jQuery. This can be achieved using the extend() method of jQuery. The extend() method is used to merge the contents of multiple objects into the object passed as the first parameter. This can be used to clone an array as we can pass 3 min read How to Dynamically Add Select Fields Using jQuery? Select Fields can be added dynamically using jQuery. This increases the flexibility and interactivity of web forms, allowing users to add or remove options as needed. In this article, we will learn two different approaches to Dynamically Add Select Fields Using jQuery. These are the following approa 3 min read How to Wrap an Element with Another Div Using jQuery? We will see how to wrap an element with another div in jQuery. We will simply wrap an element inside a div tag in jQuery. These are the following approaches: Table of Content Using wrap() method Using wrap.inner() methodApproach 1: Using wrap() method We include the jQuery library in the <head 3 min read How to insert HTML content into an iFrame using jQuery? Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method. The .contents() method: It returns all the direct children, including text and comment nodes for the selected element. Syntax: $(selector).contents()Find the iframe in the body sec 2 min read How to insert HTML content into an iFrame using jQuery? Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method. The .contents() method: It returns all the direct children, including text and comment nodes for the selected element. Syntax: $(selector).contents()Find the iframe in the body sec 2 min read Like