What is clone() in JQuery?

The JQuery clone() method allows you make to make a copy of an element.

Syntax

$([selector]).clone(true|false)

Parameters

The clone() method can be used with or without parameters. The parameters that it accepts are truecopy event handlers or falsedon’t copy event handlers (default).

Note: The clone() method is often used along with the appendTo() method.

Example

In the code below, a button is created, and when the button is clicked, a clone of the li element with the inner text of Write Articles is made through the clone() method. Then, this clone is appended to the list of todos, which is the ul element.

<!DOCTYPE html>
<html>
<head>
<title>Jquery prop()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".todo").clone().appendTo(".my-todos");
$("button, #todo").css("display", "none")
});
});
</script>
</head>
<body>
<ul>
<li class="todo" id="todo">Write Articles</li><button>Add to Todos</button>
</ul>
<ul class="my-todos">
<h4>My Todos</h4>
<li>Code for 3 hours </li>
</ul>
</body>
</html>
New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources