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