jQuery wrap syntax

Question

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');

$myDiv.after($divA.wrap($divB));

The above should turn this:

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

Into this:

<div id="myDiv"></div>
<div class="classB">
    <div class="classA"></div>
</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?

UPDATE:

A simpler example that does not work:

$myBox.after($("<p></p>").wrap("<div></div>"));

That will add just the DIV after myBox.

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

Answer 1

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 ;-)

Answer 2

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:

var divA = $("<div></div>").addClass('classA');
divA.wrap("<div class=\"classB\"></div>");
divA.insertAfter($("#myDiv"));

or

divA.after($("#myDiv"));

Here's the jQuery docs on the matter.

Answer 3

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:

var divA= $("<div></div>").addClass('classA');
$('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 ().

Answer 4

You're not looking for wrap. You want:

divB.append(divA).insertAfter('#myDiv');