Question

我需要使用jQuery / JavaScript动态地将body中的元素包裹在<div id="wrap">内。最终结果必须是：

<body>
    <div id="wrap">
        <!-- open div #wrap here -->
        <div id="nav">
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
            </ul>
        </div>
        <div id="main">....</div>
    </div>
    <!-- close div #wrap here, before close body tag -->
</body>

我应该创建div并添加已经存在于body中的内容吗？我该怎么办？

谢谢！

Answer 1

首先，您需要获取当前HTML并将其存储在变量中，然后使用.html()方法会产生奇迹：

$(function(){
    var bod = $("body"), current_html = bod.html();
    bod.html("<div id=\"wrap\">" + current_html + "</div>");
});

Answer 2

使用.wrapAll()方法，如下所示：

$('body').children().wrapAll("<div id='wrap'>");

<强> JSBin Demo

Answer 3

$(document.body).html("<div id='wrap'>...</div>")

Answer 4

这可能对你有帮助 - 使用jQuery：

$('#testElem').add();
$('body').append($('<div id="testElem"></div>'));

otherwise look at this link

Answer 5

wrapAll应该生成几个div标签。我会改用wrapInner。

$('body').wrapInner('<div id="wrap">');

如何动态地将元素包装在体内

5 个答案: