How to .wrap in jQuery?

Question

The jQuery .wrap documentation says:

This structure may be nested several levels deep, but should contain only one inmost element.

So if I supply:

<div><div></div></div>

The element will be wrapped as:

<div><div>$(this)</div></div>

How to force jQuery to wrap like this:

<div>$(this)<div></div></div>

Answer 1

To achieve this you can wrap() the original element, then use parent().append() to create another sibling to it, like this:

$(this).wrap('<div />').parent().append('<div />');

Alternatively, you can skip the parent().append() and use just after() instead, depending on your exact requirements:

$(this).wrap('<div />').after('<div />');

Example fiddle