jquery .clone() Method Examples

In jQuery, Tips and Tricks by March 26th, 2013

358 Views

jQuery clone method is an easy way to duplicate elements on a page. It performs a deep copy of the set of matched elements. In other words, it copies the matched elements as well as all of their descendant elements and text nodes to duplicate the elements. In this article, I am going to share easy examples that show how to use the clone method.

How to use the jQuery clone method

In order to clone contents of an element, it is necessary to have an element first. So for example, if you want to clone a div along with all it’s contents, we will need a div with some content. If you don’t have any content in that div, it’s clone won’t contain any content either. So let’s see how to create clones by means of some examples.

Common HTML source code for all the following examples:

Example 1: Create a Div clone and insert the clone immediately after the Div itself

Example 2: Create a Div clone and Prepend it to another Div

Example 3: Create a Div clone and Append it to another Div

Example 4: Create a List clone in a Div and one new custom list item to the Clone

That’s it!

Do you know of any other ways to use the jQuery .clone() method? Feel free to suggest by commenting below.