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.

Milind Anantwar · Accepted Answer · 2014-09-10 09:28:14Z

4

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

edited Sep 10, 2014 at 9:28

answered Sep 10, 2014 at 8:37

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Huw Rowlands Over a year ago

Thanks. I have updated my question above as I didn't explain it well. Some widgets won't have a UL inside them, some maybe just text or an image for example.

Milind Anantwar Over a year ago

@HuwRowlands: what about h tag. is it going to be always there??

Huw Rowlands Over a year ago

Yes, H1 will always be there.

G.Nader · Accepted Answer · 2014-09-10 08:38:51Z

0

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

answered Sep 10, 2014 at 8:38

G.Nader

8677 silver badges9 bronze badges

Comments

Huw Rowlands · Accepted Answer · 2014-09-10 09:40:42Z

0

Answer from above was:

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

Thanks

answered Sep 10, 2014 at 9:40

Huw Rowlands

5911 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

Wrap code with HTML (jQuery)

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related