jQuery包裹节点的多种方法（附带实例）

DOM 文档为包裹节点提供了 4 个方法，分别是 wrap()、unwrap()、wrapAll()、wrapInner()，如下表所示：

表：包裹节点的方法
方法	说明	示例
wrap(html\|element[fn])	将所有匹配的元素用其他元素的结构化标记包裹起来	$("p").wrap("<div class='wrap'></div>"); //将所有的段落用一个新创建的<div>包裹起来
unwrap()	移出元素的父元素	$("p").unwrap(); //移出段落元素<p>的父元素
wrapAll(html\|ele)	将所有匹配的元素用单个元素包裹起来	$("p").wrapAll("<div></div>"); //用一个新创建的<div>将所有段落包裹起来
wrapInner(html\|element[fn])	将每一个匹配的元素的子内容（包括文本节点）用一个 HTML 结构包裹起来	$("p").wrapInner("<b></b>"); //将所有段落内的每一个子内容加粗

1) wrap(html|element|fn) 将所有匹配的元素用其他元素的结构化标记包裹起来。下面我们将 class 属性值为 first 的节点包裹在 class 属性值为 father 的节点中，实例代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 wrap() 将所有匹配的元素用其他元素的结构化标记包裹起来</title>
<style>
body{
    font-size:12px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.first').wrap(function() {
        return '<div class="father" style="color:red"></div>';
    });
})
</script>
</head>
<body>
<div class="container">
    <div class="first">第一个</div>
    <div class="second">第二个</div>
</div>
</body>
</html>

运行本实例，结果如下图所示：

图 1 包裹节点1

2) unwrap() 方法移出元素的父元素。下面我们将段落元素 <p> 从 <div> 中移出，实例代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 unwrap()移出元素的父元素</title>
<style>
body{
    font-size:12px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $("p").unwrap();
})
</script>
</head>
<body>
<div class="container">
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>
</body>
</html>

运行本实例，结果如下图所示：

图 2 包裹节点2

3) wrapAll（html|ele）将所有匹配的元素用单个元素包裹起来。下面我们将 3 个段落元素 <p> 包裹在一个 <div> 元素中，实例代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 wrapAll()将所有匹配的元素用单个元素包裹起来</title>
<style>
body{
    font-size:12px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $("p").wrapAll("<div></div>");
})
</script>
</head>
<body>
<div class="container">
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>
</body>
</html>

运行本实例，结果如下图所示：

图 3 包裹节点3

4) wrapInner(html|element|fn) 将每一个匹配的元素的子内容（包括文本节点）用一个 HTML 结构包裹起来。下面我们将 class 属性值为 child 的节点包裹在 class 属性值为 first 节点中，实例代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 wrapInner() 将每一个匹配的元素的子内容（包括文本节点）用一个 HTML 结构包裹起来</title>
<style>
body{
    font-size:12px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.first').wrapInner(function() {
        return '<div class="child" style="color:red"></div>';
    });
})
</script>
</head>
<body>
<div class="container">
    <div class="first">第一个</div>
    <div class="second">第二个</div>
</div>
</body>
</html>

运行本实例后，网页源码结果如下图所示：

图 4 包裹节点4

jQuery包裹节点的多种方法（附带实例）

相关文章