Cannot move li items from one unrelated list to another

Question

I have two unordered lists

<ul id="#list1"> <li>one</li> <li>two</li> </ul> <ul id="#list2"></ul> 

and two buttons

 <input id="add" name="yt1" type="button" value="<<" /><br /> <input id="remove" name="yt2" type="button" value=">>" /> 

If the button with id is pressed, all elements from # list1 should be moved to # list2. How to move items from one list to another using jQuery

I'm at least something like below, but not sure how to make the actual move

 $("#add").click(function(){ $("#list1 li").each(function(){ //Do not know what to put in here } }) 

Answer 1

You can use appendTo :

 $("#add").click(function(){ $("#list1 li").appendTo('#list2'); }); 

Demo

Also change your identifiers from <ul id="#list1"> to <ul id="list1"> .

Answer 2

  //this will move selected items from yt1-list to yt2-list $("#yt1 option:selected").appendTo("#yt2"); //this will move all selected items from yt1-list to yt2-list $("#yt1 option").appendTo("#yt2"); 

Answer 3

  $('#list2').html( $('#list1').html() ); 

Answer 4

Try it. Did not test it, but it should work (logically).

 $("#add").click(function(){ $("#list1 li").each(function(){ var holder; $(this) = holder; $(this).remove(); $('#list2').append(); } });