How do I move an element out of its parent element using jQuery?

Question

In the example below, using jQuery, how would I move .nav out of .header and append it to .container?

So this is before:

<div class="container">
    <div class="header">
        <div class="nav"></div>
    </div>
</div>

And this would be after:

<div class="container">
    <div class="header"></div>
    <div class="nav"></div>
</div>

This is what I tried, but it's not working.

<script> $( "div.container" ).append( $( ".nav" ) ); </script>

Note: It's on a Ning site, and the script above was inserted into the custom code section in the admin dashboard.

Answer 1

Your code is correct for appending the element and get desired dom. However you have not called it at correct place. write the code on document ready:

$(document).ready(function(){
$( "div.container" ).append($(".nav"));
})

Answer 2

.append()/.prepend() and .appendTo()/.prependTo() are the driods you're looking for.

If you're still having trouble, have a look at .detach().