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
updated_contacts. Using jQuery and
But every time, the original
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):
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.
clone method is here
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
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 :)