How to create a child div that would wrap around all other child divs

Question

I have this html structure:

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</div>

How can would I use jquery to add child div to div "a" that would wrap around "b", "c" and "d"? Basically, the final html I want should look like this:

<div class="a">
    <div class="child">
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
</div>

Thanks

Answer 1

Try,

$('.a > div').wrapAll($('<div/>',{'class' : 'child'}));

DEMO

Answer 2

Try this:

$(function() {
   $('.a > div').wrapAll('<div class="child"></div>');
});

Answer 3

use .wrapInner()

$('.a').wrapInner('<div class="test"></div>')

Working Demo

or

use .wrapAll() :

 $('.a div').wrapAll('<div class="child"></div>')

Working Demo

Answer 4

$('.a').html('<div class="child">'+$('.a').html()+'</div>');