How to wrap elements when having their parent element?

Question

I have the following structure:

<div class='wrap1'>
 <div class='element1'></div>
 <div class='element2'></div>
</div>

Now I'd like to get:

<div class='wrap1'>
 <div class='anotherWrap'><!-- this is new-->
  <div class='element1'></div>
  <div class='element2'></div>
 </div>
</div>

That is, I need to wrap element1 and element2 in anotherWrap.

I tried:

$('.wrap1').children().wrapAll("<div class='anotherWrap'></div>")

But, as I expected, this wrapped every sub div in my wrap1 div separately.

How to accomplish this?

Answer 1

Use .wrapInner() over the parent element,

$('.wrap1').wrapInner("<div class='new' />");

DEMO

Answer 2

I was also trying to do but didn't find any solution. I used the following work around. Hope this will work for you..

$('.wrap1').prepend("<div class='anotherWrap'>").append("</div>");