Wrap element with specific code using jQuery

Question

I'm trying to wrap div with specific html code but I'm having problem using jQuery's .before and .after because jQuery would automatically close div I added into .before.

This is my html:

<div class="navigation">
    <a>first</a>
    <a>second</a>
    <a>third</a>
</div>

When I try using this code:

$('.navigation').before('<div class="newNavigation"><a>Prev</a>');
$('.navigation').after('<a>Next</a></div>');

He will automatically close .newNavigation div, which is what I don't want to happen because I'm trying to close that div in .after code. Generated HTML looks like this:

<div class="newNavigation">
    <a>Prev</a>
</div>
<div class="navigation">
    <a>first</a>
    <a>second</a>
    <a>third</a>
</div>
<a>Next</a>

And I'm trying to get this:

<div class="newNavigation">
    <a>Prev</a>
    <div class="navigation">
        <a>first</a>
        <a>second</a>
        <a>third</a>
    </div>
    <a>Next</a>
</div>

To help you little bit with this I created jsFiddle where I unsuccessfully tried using .before and .after.

Thank you in advance!

Solution:

Although there was few good solutions I decided to go with @Andy-E suggestion because his code looks cleanest to me.

$(".navigation")
    .wrap('<div class="newNavigation">')
    .before("<a>Prev</a>")
    .after("<a>Next</a>");

Thank you all for participating!

Clive · Accepted Answer · 2011-09-26 15:23:37Z

2

Use wrap() instead.

var wrapper = $('<div />').addClass('newNavigation');
$('.navigation').wrap(wrapper);
$('.newNavigation').prepend('<a>Prev</a>').append('<a>Next</a>');

edited Sep 26, 2011 at 15:23

answered Sep 26, 2011 at 14:54

Clive

36.9k8 gold badges89 silver badges113 bronze badges

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

4 Comments

Klikerko Over a year ago

Hi Clive, I'm not sure if you have tested your code but while wrapping works it doesn't prepend and append links.

Clive Over a year ago

Apologies I thought wrapper would carry through as a jQuery object...obviously not! I've updated the code and it works on this jsfiddle

Andy E Over a year ago

Your latest update is much less performant than it could be because it requires invoking the selector engine twice. This effect is worsened in IE 7 and older, which doesn't support querySelectorAll or getElementsByClassName.

Clive Over a year ago

@Andy E Agreed, your solution is definitely more efficient

Andy E · Accepted Answer · 2011-09-26 15:00:57Z

1

jQuery has a built-in wrap() function, use it:

$(".navigation")
    .wrap('<div class="newNavigation">')
    .before("<a>Prev</a>")
    .after("<a>Next</a>");

Demo: Your fiddle, updated.

This sample highlights how neatly jQuery methods can be chained together. Here, all three methods return the original $(".navigation") jQuery object, so there's no need to use temporary variables or break your code up.

edited Sep 26, 2011 at 15:00

answered Sep 26, 2011 at 14:54

Andy E

346k86 gold badges482 silver badges452 bronze badges

1 Comment

Klikerko Over a year ago

Thanks Andy, this is very clean solution.

codefrenzy · Accepted Answer · 2011-09-26 14:54:36Z

0

You could try just using .html() like this:

// Get the original html from the navigation div:
var navigationHtml = $('.navigation').html();

// Replace the contents of navigation with the original html surrounded by the extra elements
$('.navigation').html('<div class="newNavigation"><a>Prev</a>' + navigationHtml + '<a>Next</a></div>');

answered Sep 26, 2011 at 14:54

codefrenzy

2462 silver badges6 bronze badges

2 Comments

Klikerko Over a year ago

Thanks codefrenzy, your solution almost worked. Only problem is that I need "prev" and "next" links to be outside of .navigation div. It's a minor error but thanks for helping anyways!

codefrenzy Over a year ago

Ahh, sorry yes, you're right! Glad you got a correct answer elsewhere :)

Ya Zhuang · Accepted Answer · 2011-09-26 14:55:31Z

0

$(".navigatioin").wrap('<div class="newNavigation"></div>');
$(".newNavigation").prepend('<a>Prev</a>').append('<a>Next</a>');

should works for you,

answered Sep 26, 2011 at 14:55

Ya Zhuang

4,66033 silver badges40 bronze badges

Collectives™ on Stack Overflow

Wrap element with specific code using jQuery

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related