如何动态地将元素包裹在身体内部

How to wrap elements inside of body dynamically

本文关键字：包裹 元素 内部 何动态 动态      更新时间：2023-09-26

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

<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并在添加正文中已经存在的内容之后吗？我该怎么做？

谢谢！

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

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

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

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

JSBin演示

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

wrapAll应该产生几个div标记。我会用wrappeInner代替。

$('body').wrapInner('<div id="wrap">');
相关文章：