title: Copy list items from one list to another with jQuery
body: <p>I'm trying to get a list of items from one list and put it into another list.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>$("#change").click(function () {
      arr = $('#old').map(function () {
          return $(this).text();
      }).get();
  
      $.each(arr, function (index, item) {
          $('#test').append($( "&lt;ul&gt;&lt;li&gt;" + item + " at " + index +"&lt;/li&gt;" ));
      });
  });
  </code></pre>
  
  <p>HTML:
       </p>
  
  <pre><code>&lt;ul id="old"&gt;
      &lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="new"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>It would take the items from <code>old</code> and put it in <code>new</code>. It seems that it puts all the items into just one <code>&lt;li&gt;</code> when it puts it in <code>new</code>.</p>