Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

jquery
clone
copy
communitycreator

What is clone() in JQuery?

Theodore Kelechukwu Onyejiaku

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>

RELATED TAGS

jquery
clone
copy
communitycreator

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku
RELATED COURSES

View all Courses

Keep Exploring