How to wrap an <ul> in another <ul>?

Question

I have an unordered list that I would like to wrap inside another unordered list in jQuery, using the following code:

$('ul.innerlist').prepend('<ul><li>');
$('ul.innerlist').append('</li></ul>');

However, rather than the first line creating the opening tags and the second creating closing tags (and wrapping the .innerlist), the first line appears to create both open and close tags, resulting in this

<ul>
  <li></li>
</ul>
<ul class="innerlist">
  <li></li>
</ul>

Instead of this:

<ul>
  <li>
    <ul class="innerlist">
      <li></li>
    </ul>
  </li>
</ul>

Answer 1

This uses jQuery's wrap() method to wrap the selected elements with the elements you provide.

Example: http://jsfiddle.net/patrick_dw/bD8LQ/

$('ul.innerlist').wrap('<ul><li></li></ul>');

Answer 2

See http://api.jquery.com/wrap/

Answer 3

try the following:

$('ul.innerlist').each(function(i,v){v=$('<ul><li></li></ul>').append(v);});

or the wrap function.