Take the 2-minute tour ×

It's end of day. I'm hoping I'm just having a lapse of logic.

I can't get this to work:

var $divA= $("<div></div>").addClass('classA');

var $divB= $("<div></div>").addClass('classB');


The above should turn this:

<div id="myDiv"></div>

Into this:

<div id="myDiv"></div>
<div class="classB">
    <div class="classA"></div>

But it doesn't seem to work with that 'wrap' in there. I don't get any errors, it just doesn't wrap divA with divB and just inserts divA by itself.

Am I misunderstanding wrap?


A simpler example that does not work:


That will add just the DIV after myBox.

It seems like jQuery doesn't like wrap added to after.

share|improve this question
add comment

6 Answers

Have you tried

$myDiv.after($divA.wrap('<div class="divB"></div>'));

just for testing purposes?

As far as I understand, you shouldn't pass a jQuery object to the wrap-function:

The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around each of the elements in the set of matched elements.

If the example above works, then this is the reason ;-)

share|improve this answer
The man is right, it doesn't take a jQuery object: api.jquery.com/wrap –  Nick Craver Jan 28 '10 at 22:55
Good to know! Alas, even by just making it a string, I still can't get it to work (see new example in my post) –  DA. Jan 28 '10 at 23:05
It DOES take a jQuery object, since $() factory can take it. Take $( $('<div/>') ) for example –  Dénes Papp Dec 29 '12 at 16:48
add comment

I may be reading this wrong, but if you're using jQuery, isn't the $ a reserved character? have you tried just setting your variable names so they don't use it?

If so:

divA.wrap("<div class=\"classB\"></div>");



Here's the jQuery docs on the matter.

share|improve this answer
There's a bit of a debate as to whether or not to do that but many people preface any variable that is a jQuery object with the $ –  DA. Jan 28 '10 at 23:07
Wow didn't know that. Looks like PHP or Perl! –  Jared Updike Jan 28 '10 at 23:15
you confuse $divA with $(divA). They are not the same. And $divA is also not the same as $, they are like A and B, two separate variable names –  Dénes Papp Dec 29 '12 at 16:51
add comment

I got this to work:

$('div#myDiv').after("<div class='classA'></div>").end().find('.classA').wrap("<div class='classB'></div>");

with your html to solve your initial question. Here's the source for jQuery's end function. This code will go make the chain go up one level (to the myDiv level), and will then wrap based on the find('.classA') at that level. That will find your div added with after, and wrap it in div with classB.

Edit: Ok, I think this will work for you the way you want:

$('div#myDiv').after($(divA).wrap('<div class="divB" />'));

I think the problem was that when calling wrap on divA, it needs to be a jQuery object to work correctly. So really all you were missing was wrapping divA in ().

share|improve this answer
That's my fallback, but I'm trying to avoid having to traverse things again. –  DA. Jan 28 '10 at 23:32
add comment

You're not looking for wrap. You want:

share|improve this answer
Care to specify the downvote? –  nikc.org Jan 29 '10 at 9:37
I'll up vote that as that would seem to accomplish the same thing. Nice! I'm still curious as to why the wrap method I use only partially works. It seems like it should do what I'm intending or should fail outright. –  DA. Jan 29 '10 at 16:55
add comment

Just stumbled onto this thread having the same problem: jQuery .wrap() isn't working

I think if you change your code from

$myDiv.after($divA.wrap($divB)) to $myDiv.after($divA.wrap($divB).parent())

you'll get your wrap.

share|improve this answer
add comment

The confusing part might have been to You that .wrap() returns the inner element, not the parent element.

So you have to add the parent object of the wrapped one as follows:

var $divA= $("<div/>").addClass('classA'),
    $divB= $("<div/>").addClass('classB');


($divA.parent() is equal to $divB after the wrapping)

So the key part is that $divA.wrap($divB) returns NOT $divA but $divB

see the reference:

This method returns the original set of elements for chaining purposes.

share|improve this answer
add comment

Your Answer


