How to create nested DIVs with jQuery?

Question

i have this jquery script:

$('#add').click(function(){
    $('<div class="drag" style="left:20px;"/>')
        .text( num++ )
        .appendTo( document.body )
        .css({ 
            top: $( window ).height() - 500 , 
            left:$( window ).width() - 500
        });
});

this will create: <div class="drag" style="left:20px;"/></div>

what i am interested in creating is this:

<div class="drag" style="left:20px;"/>
    <div class="handle SE">
    </div>
</div>

if i do this:

...
$('<div class="drag" style="left:20px;"/><div class="handle SE">')
.text( num++ )
...

jquery will create 2 separate di'vs and not nested.

any ideas?

thanks

Answer 1

Use .wrap():

$('<div class="handle SE">')
  .text(num++)
  .appendTo(document.body)
  .wrap('<div class="drag" style="left:20px;"/>);

Working example at http://jsfiddle.net/alnitak/r4Dz6/

In this particular example it's neccesary to call .appendTo(document.body) before the wrap is done because .wrap() returns the original element. Calling .appendTo last would result in the newly wrapped parent element getting removed from the hierarchy.