jQuery.append() behaves a differently in different situations. It sometimes moves the contents from the DOM to the new location where it is appended and sometimes it clones it (keeping a copy of the dom element in its original location). I stumbled upon this when trying to fix an issue with <form> submit. The content I was appending had a form embedded and the append() method in this case was creating two copies of the <form> node (since, it decided to go with cloning and not moving). So, how does the append() method decide what to use. I found an interesting article here:
http://welcome.totheinter.net/2009/03/19/the-undocumented-life-of-jquerys-append/
However in my case, It was a bit different. Although, I was using a single node to append to, the append() method wasn’t moving the elements. I figured out that its not only depends on whether you are appending the elements to single node or multiple nodes, but also on how you are fetching the contents to be appended. I was using .html() to fetch all the content from the DOM and then using append to insert it elsewhere. This in all cases would create a clone and not move the content. Instead, use children() to fetch all contents and bingo!!! jQuery.append() moves all content from the source to the destination.