在jQuery中，如果想要将某个元素用其他元素包裹起来，我们有以下3种方法。

  • （1）wrap()
  • （2）wrapAll()
  • （3）wrapInner()

一、wrap()

在jQuery中，我们可以将所选元素使用其他元素包裹起来。

语法：

$(A).wrap(B)

说明：

$(A).wrap(B)表示将A元素使用B元素包裹起来。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").wrap('<div style="background-color:orange;"></div>');
            });
        })
    </script>
</head>
<body>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <input id="btn" type="button" value="包裹" />
</body>
</html>

默认情况下，浏览器预览效果如图所示。

当我们点击【包裹】按钮后，浏览器预览效果如图所示。

二、wrapAll()

我们都知道，replaceWith()和replaceAll()这两个方法的功能是相同的，只不过操作对象是颠倒的而已。但是这里大家要注意啦：wrap()和wrapAll()这两个方法功能是不相同的！

在jQuery中，wrap()方法是将所有元素进行“单独”包裹，而wrapAll()方法是将所匹配的元素“一起”包裹。

<p>绿叶学习网</p>
<p>绿叶学习网</p>
<p>绿叶学习网</p>

对于上面这段代码，如果使用$("p").wrap("<div></div>")，则会得到以下结果：

<div><p>绿叶学习网</p><div>
<div><p>绿叶学习网</p><div>
<div><p>绿叶学习网</p><div>

如果使用$("p").wrapAll("<div></div>")，则会得到以下结果：

<div>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
</div>

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").wrapAll('<div style="background-color:orange;"></div>');
            });
        })
    </script>
</head>
<body>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <input id="btn" type="button" value="包裹" />
</body>
</html>

默认情况下，浏览器预览效果如图所示。

当我们点击【包裹】按钮后，此时预览效果如图所示。

三、wrapInner()

在jQuery中，我们可以使用wrapInner()方法将所选元素“内部所有元素以及文本”用其他元素包裹起来。

语法：

$(A).wrapInner(B)

说明：

$(A).wrapInner(B)表示将A元素“内部所有元素以及文本”使用B元素包裹起来。注意，wrapInner()方法不会包裹A元素本身。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").wrapInner("<strong></strong>");
            });
        })
    </script>
</head>
<body>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <input id="btn" type="button" value="包裹" />
</body>
</html>

默认情况下，浏览器预览效果如图所示。

当我们点击【包裹】按钮后，浏览器预览效果如图所示。

分析：

当我们点击【包裹】按钮后，此时得到的HTML结构如下：

<p><strong>绿叶学习网</strong></p>
<p><strong>绿叶学习网</strong></p>
<p><strong>绿叶学习网</strong></p>