Create a div containing target div using jQuery

Question

I think that this should be easy, but i'm not able to get it working. I want to target a div or other element using jQuery and then dinamically create a div containing the targeted element, for example:

jQuery ('.myclass')

how can i create a div with the background-color attribute set to white that contains 'myclass' element?

Initially i have: <div class="myclass">Some HTML elements inside</div>

And after executing the jQuery call i want to have: <div style="background-color:#fff"><div class="myclass">Some HTML elements inside</div></div>

I hope that you understand my question... thanks in advance

Answer 1

var $myDiv = $('<div>').css('background-color','#fff').append( $('.myclass') );

You can then write this variable to the DOM as you see fit, or do whatever else you need to do.

Answer 2

You can use the wrap function to put a wrapper around the matching elements. I'd prefer to use a class for the background, but you can assign CSS properties directly as well.

$('.myclass').wrap( $('<div></div>').css( 'background-color', '#fff' ) );

or

$('.myclass').wrap( $('<div></div>').addClass('white-background') );