Question

我有以下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>

如何使用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>

Answer 1

<强> 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

Answer 2

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

<强> jsFiddle example

结果：

<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>

如何将div节点移动到上一级

2 个答案: