jQuery--包裹节点（wrap()、wrapAll()、wrapInner()），取消包裹节点（unwrap()）详解

最新推荐文章于 2020-11-28 14:37:10 发布

吴声子夜歌

最新推荐文章于 2020-11-28 14:37:10 发布

阅读量1.9k

点赞数

分类专栏： jQuery 文章标签： jQuery 包裹节点 wrap() unwrap()

本文链接：https://blog.csdn.net/cold___play/article/details/101929818

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

包裹节点

所谓包裹节点，是指在现有节点的外围包裹一层其他元素标签，使当前节点称为新元素的子节点。jQuery提供了wrap()和wrapAll()等方法用于实现节点的包裹。

1. wrap()方法：
wrap()方法用于将所匹配的元素通过指定的HTML标签包裹起来，其语法格式如下：

$(selector).wrap(htnml)
$(selector).wrap(element)

$(selector)：表示被包裹的匹配元素
html：表示用于包裹的html标签
element：表示用于包裹的DOM元素

示例：

$("#headerDiv").wrap("<b></b>");
$("#headerDiv").wrap($("span"));
$("#headerDiv").wrap(document.getElementById("mySpan"));

2. wrapAll()方法：
wrapAll()方法用于将所匹配的元素使用HTML标签整体包裹起来，其语法格式如下：

$(selector).wrapAll(html)
$(selector).wrapAll(element)

$(selector)：表示被包裹的匹配元素
html：表示用于包裹的html标签
element：表示用于包裹的DOM元素

3. wrapInner()方法：
wrapInner()方法用于将所匹配元素的子内容（包含文本节点）使用HTML标签包裹起来。

$(selector).wrapInner(html)
$(selector).wrapInner(element)

$(selector)：表示被包裹的匹配元素
html：表示用于包裹的html标签
element：表示用于包裹的DOM元素

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="headerDiv">
			<a href="#">影视</a>
			<a href="#">购物</a>
		</div>
		<div id="menuDiv">
			<a href="#">喜好推荐</a>
			<a href="#">热门推荐</a>
		</div>
		<div id="footerDiv">
			<a href="#">影视频道</a>
			<a href="#">购物频道</a>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#headerDiv a").wrap("<b></b>");
				$("#headerDiv a").wrapAll("<b></b>");
				$("#headerDiv a").wrapInner("<b></b>");
			});
		</script>
	</body>
</html>

在这里插入图片描述

4. unwrap()方法：
unwrap()方法用于删除所匹配元素的父元素，能够快速取消wrap()方法所产生的效果。

示例：取消节点包裹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="advDiv">
			<a href="#"><b>影视频道</b></a>
			<a href="#"><b>购物频道</b></a>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#advDiv b").unwrap();
			});
		</script>
	</body>
</html>

在这里插入图片描述

吴声子夜歌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery--包裹节点（wrap()、wrapAll()、wrapInner()），取消包裹节点（unwrap()）详解

包裹节点所谓包裹节点，是指在现有节点的外围包裹一层其他元素标签，使当前节点称为新元素的子节点。jQuery提供了wrap()和wrapAll()等方法用于实现节点的包裹。1. wrap()方法：wrap()方法用于将所匹配的元素通过指定的HTML标签包裹起来，其语法格式如下：$(selector).wrap(htnml)$(selector).wrap(element)$(sele...
复制链接

扫一扫

专栏目录