jQuery append and clone

I was trying to append some part of the DOM to some other element of the page.

<div id='container'>
  <ul class='contacts_list'>
  </ul>
</div>
...
<div id='updated_contacts'>
</div>

On a click event, i wanted to append contacts_list to updated_contacts. Using jQuery and append method

  $("#updated_contacts").append($(".contacts_list"));

But every time, the original contacts_list from container was getting removed.

After searching documentation of append method, i found out that when an element is inserted to some other part of DOM, it is removed from the original location.

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

Using clone method we can solve this problem.

clone creates a copy of the existing element and appends it to new location keeping original version as it is.

  $("#updated_contacts").append($(".contacts_list").clone());

Documentation of clone method is here

Using clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

is important point to consider while using clone.

Update :

Prashant pointed out that the clone and append methods are part of native javascript itself. And jQuery makes use of them to build simpler API.

Javascript has appendChild and cloneNode methods which can be used when we are not using jQuery in same situation.

More info about these methods can be found here.

Thanks Prashant :)