How to clone a block using jQuery ? Last Updated : 23 Jul, 2025 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 Must Do Coding Questions - Topic-wise N namaldesign Follow Improve Article Tags : JQuery CSS-Properties jQuery-Methods HTML-Questions jQuery-Questions +1 More Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like