Moving items from a list to another list using jQuery

A simple way of moving all child elements from a source element into a destination element using jQuery.
Let’s say you have something like the following HTML structure:

The requirement is to move all the child elements from the source <ul> to a destination <ul>. Here is a simple solution with some fadeout/fadein effect.

Notes:

  • On the call to the .on() function, I’m passing in the source and destination list objects.
  • Use .prepend() to add the list items to the top of the list.
  • The .children() function does not return text nodes; to get all children including text and comment node, use .contents().
  • Of course, this example can also be adapted to not just lists but other HTML elements that can act as containers.

See the code in action at this demo

Jumpstart your MCSD certification with free online course and free exam

Word of the day: free

If you are interested in pursuing your MCSD: Web Applications certification or MCSD: Windows Store Apps, today is the best day to get started with offers from Microsoft. You can take the free online course Developing in HTML5 with JavaScript and CSS3 Jump Start, and then receive a free exam voucher to take Exam 70-480 Programming in HTML5 with JavaScript and CSS3. For details, visit the HTML5 offer at the Microsoft Learning site.