jQuery Introduction | Manipulating Elements | Copying Elements .clone()

jQuery provides methods that make it easy to copy elements or content.

Copying Elements

Using the following method, you can copy selected elements or content and create new HTML elements or content.

.clone() Method

The .clone() method copies the selected element and creates a new HTML element.

When you have elements like the following:

<p id="hello">Hello.</p>
<p id="devkuma">This is devkuma.</p>

Copy the hello element as follows and paste it by using the .appendTo() method.

$("#hello").clone().appendTo("#devkuma");

Run code

As you can see when running the example above, the .clone() method only copies an existing HTML element and creates a new HTML element.
Therefore, you must add the element by using another method such as .append() or .appendTo().
If you use only the .appendTo() method without using .clone(), the existing HTML element itself is added instead.

The .appendTo() method adds the selected element to the end of the target element.