How to move div node to upper level

Question

I have the following html structure.

<html>
    <head></head>
    <body class="primary-define color-custom">
        <div id="header"></div>
        <div id="container">
            <div id="container-inner" class="wrapper clearafter">
                <div id="notification" class="active">.. notification content here</div>
                <div id="content">content here</div>
            </div>
        </div>
    </body>
</html>

How can I move the notification outside the container and the header to become like below using the jQuery?

<html>
    <head></head>
    <body class="primary-define color-custom">
        <div id="notification" class="active">.. notification content here</div>
        <div id="header"></div>
        <div id="container">
            <div id="container-inner" class="wrapper clearafter">
                <div id="content">content here</div>
            </div>
        </div>
    </body>
</html>

Can someone tell me, The different If use `detach()` on `prependTo()` like this `$("#notification").detach().prependTo('body')` ? I have read some answers [here](http://stackoverflow.com/q/1279957/1297435). There are many who say, if not use `detach()` it does copy not move on jquery mobile, doesn't it? — rails_id, May 28 '14 at 17:46

score 2 · Accepted Answer · answered May 28 '14 at 17:01

html

<html>

<head></head>
<body class="primary-define color-custom">

<div id="header"></div>


<div id="container">
<div id="container-inner" class="wrapper clearafter">


<div id="notification" class="active">.. notification content here</div>

<div id="content">content here</div>


</div>
</div>
</body>
</html>

js

$(function(){
var a = $("#notification");

$("body").prepend(a);
});

fiddle

score 0 · Answer 2 · answered May 28 '14 at 17:02

$('#notification').insertBefore($('#header'))

jsFiddle example

Results in:

<body class="primary-define color-custom">
    <div id="notification" class="active">.. notification content here</div>
    <div id="header"></div>
    <div id="container">
        <div id="container-inner" class="wrapper clearafter">
            <div id="content">content here</div>
        </div>
    </div>
</body>

How to move div node to upper level

2 Answers2