jquery包裹节点

最新推荐文章于 2020-05-23 23:03:06 发布

this_is_art_of_code

最新推荐文章于 2020-05-23 23:03:06 发布

阅读量958

点赞数

分类专栏： jquery 文章标签： jquery 包裹节点

本文链接：https://blog.csdn.net/qq_28596151/article/details/80443701

版权

jquery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

如果想用jquery将某个节点使用其他标记包裹起来，可以使用wrap()方法。

1、wrap()方法

语法：$(selector).wrap(content);

解释：利用content包裹选择器匹配到的每一个元素节点。包裹的结果就是讲匹配到的节点变为content的子节点。

2、wrapAll()方法

语法和wrap()方法差不多，但是wrapAll()方法是使用一个标签将匹配到的所有包裹起来。而wrap()方法是将每一个匹配到的元素分别使用content包裹。

3、wrapInner()方法

该方法是将匹配到的元素的子内容使用其他标记包裹起来。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
		<li title="菠萝2">菠萝2</li>
		<li title="菠萝3">菠萝3</li>
	</ul>
</body>
<script> 
	$(function(){
		//结果<b><li title="苹果">苹果</li></b>，同时不改变原来的语义
		$("li").wrap("<b></b>");
		//用strong包裹匹配到的所有元素，这样匹配到的元素就会变为strong的子元素。
		//之前匹配在<b></b>下面的li元素将会消失
		$("li").wrapAll("<strong></strong>");
		$("li").wrapInner("<a href='#'></a>");
	});
</script>
</html>

运行上面的代码就可以感受到的各个方法的不同。