1.wrap(html|ele|fn):把所有匹配的元素用其他元素的结构化标记包裹起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<script >
$("a").wrap("<div></div>") //把a标签用div标签包裹起来
</script>
</body>
</html>
2.wrapAll(html|ele) :将所有匹配的元素用一个元素来包裹,而 wrap() 方法是将所有的元素进行单独包裹。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<script >
$("a").wrapAll("<div></div>")
</script>
</body>
</html>
3.wrapInner(html|ele|fn):将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。将里面的内容当成一个整体包裹起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>百度</div>
<script>
$("div").wrapInner("<a href='http://www.baidu.com'></a>");
</script>
</body>
</html>
4.unwrap() :移出匹配元素的父元素,用于取消 .wrap()方法的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<a href="http://www.baidu.com"><span id="link">百度</span></a>
</div>
<script>
$("#link").unwrap();//div标签不会去掉
</script>
</body>
</html>