jQuery中wrap、wrapAll、wrapInner的区别和用法

一、wrap()方法：

wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。

html代码如下：

<span>百度</span>
<span>百度</span>

jQuery代码如下：

<script>
	$("span").wrap("<a href='http://www.baidu.com'></a>");//每一个span都用一个a标签包裹起来。
</script>

结果如下：

二、wrapAll()方法：

wrapAll(html|ele) ：将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹。

html代码如下：

<span>百度</span>
<span>百度</span>

jQuery代码如下：

<script>
	$("span").wrapAll("<a href='http://www.baidu.com'></a>");//将所有的span用一个a标签来包裹。
</script>

结果如下：

三、wrapInner()方法：

wrapInner(html|ele|fn)：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。

html代码如下：

<div>百度</div>

jQuery代码如下：

<script>
	$("div").wrapInner("<a href='http://www.baidu.com'></a>");//将div里面的内容用a标签进行包裹。
</script>

结果如下：

四、unwrap()方法：

unwrap() ：移出匹配元素的父元素，用于取消 .wrap()方法的效果。

html代码如下：

<div>
	<a href="http://www.baidu.com"><span id="link">百度</span></a>
</div>

jQuery代码如下：

<script>
	$("#link").unwrap(); //将包裹着span的a标签去掉，其祖先标签div不会去掉。
</script>

结果如下：