在 jQuery 中，如果想要将某个元素用其他元素包裹起来，我们可以用 wrap()、wrapAll() 和 wrapInner() 3种方法来实现。下面就对这三种方法一一介绍。
图 1：默认效果
图2：点击按钮后的效果
图 3：默认效果
图 4：点击按钮后的效果
图 5：默认效果
图 6：点击按钮后的效果
jQuery wrap()方法
在 jQuery 中，我们可以使用 wrap() 方法将所选元素用其他元素包裹起来。
语法：
$(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>C语言中文网</p>
<p>C语言中文网</p>
<p>C语言中文网</p>
<input id="btn" type="button" value="包裹" />
</body>
</html>
默认情况下，预览效果如图 1 所示。
图 1：默认效果
我们点击【包裹】按钮后，预览效果如图 2 所示。
图2：点击按钮后的效果
jQuery wrapAll()方法
我们都知道，replaceWith() 和 replaceAll() 这两个方法的功能是相同的，只不过操作对象是颠倒的而已。但是这里大家要注意啦：wrap() 和 wrapAll() 这两个方法的功能是不相同的。
在 jQuery 中，wrap() 方法是将所有元素“单独”包裹，而 wrapAll() 方法是将所匹配的元素“一起”包裹。
<p>C语言中文网</p> <p>C语言中文网</p> <p>C语言中文网</p>
对于上面这段代码，如果使用$("p").wrap("<div></div>")，则会得到以下结果：
<div><p>C语言中文网</p><div> <div><p>C语言中文网</p><div> <div><p>C语言中文网</p><div>
如果使用$("p").wrapAll("<div></div>")，则会得到以下结果：
<div>
<p>C语言中文网</p>
<p>C语言中文网</p>
<p>C语言中文网</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>C语言中文网</p>
<p>C语言中文网</p>
<p>C语言中文网</p>
<input id="btn" type="button" value="包裹" />
</body>
</html>
默认情况下，预览效果如图 3 所示。
图 3：默认效果
我们点击【包裹】按钮后，此时预览效果如图 4 所示。
图 4：点击按钮后的效果
jQuery 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>C语言中文网</p>
<p>C语言中文网</p>
<p>C语言中文网</p>
<input id="btn" type="button" value="包裹" />
</body>
</html>
默认情况下，预览效果如图 5 所示。
图 5：默认效果
我们点击【包裹】按钮后，预览效果如图 6 所示。
图 6：点击按钮后的效果
我们点击【包裹】按钮后，此时得到的 HTML 结构如下。
<p><strong>C语言中文网</strong></p> <p><strong>C语言中文网</strong></p> <p><strong>C语言中文网</strong></p>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23803.html