Wrap code with HTML (jQuery)

Question

I want to add some html to a widget area, basically to wrap the inner content. Here is the current code:

<aside id="meta-2" class="widget widget_meta"><h1 class="widget-title">Stuff</h1>
  <ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
    <li><a href="#">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
  </ul>
</aside>

I want it to become:

<aside id="meta-2" class="widget widget_meta"><h1 class="widget-title">Stuff</h1>
 <div class="widget-inner">
  <ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
    <li><a href="#">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
  </ul>
 </div>
</aside>

Please note that some 'widgets' don't contain a UL, there might just be an image inside or some text.

I have tried some jQuery snippets using before, append etc but to no avail.

Any help would be most appreciated.

Answer 1

Answer from above was:

$( "aside h1" ).nextAll().wrap( "<div class='widget-inner'></div>" );

Thanks

Answer 2

You can use .wrap():

$( "aside ul" ).wrap( "<div class='widget-inner'></div>" );

Working Demo

Update: for non uniform DOM:

$( "aside h1" ).nextAll().wrap( "<div class='widget-inner'></div>" );

Working Demo

Answer 3

use .wrap() function see link : wrap() jquery