Wrap element then append another element inside it

Question

Look at this code

<div class="preview">
    <img src="link" alt="" class="overlay" />
</div>

what i need to do is to wrap the inside div call "overlay" then append another div called "overlay2" to be like below

<div class="preview">
    <div class="overlay">
        <img src="link" alt="" class="overlay" />
        <div class="overlay2"></div>
    </div>
</div>

i'm tried to use .wrap and append but i didn't know how to use this with one command

Answer 1

You may try this

$('div.preview img')
.wrap('<div class="overlay"></div>')
.after('<div class="overlay2"></div>');

DEMO (See the source).

OR

$('div.preview img')
.wrap($('<div/>', {'class':'overlay'}))
.after($('<div/>', {'class':'overlay2'}));

DEMO (See the source).

Output

<div class="preview">
    <div class="overlay">
        <img src="link" alt="" class="overlay">
        <div class="overlay2"></div>
    </div>
</div>

Answer 2

very simple

$('.preview').append('<div class="overlay2"></div>')
$('.overlay').wrap('<div class="overlay"></div>')

test it here: http://jsfiddle.net/RASG/32JSW/