wrap(),wrapAll(),wrapInner()的区别

　　wrap从字面上理解就是包裹的意思，这三个函数也都是起到将内部节点进行包裹的作用，但是他们的各自的功能有又大不相同。

　　1.  a.wrap(b)

　　这个函数的作用是用b将a进行包裹，其中a所选中的可以为多个，wrap()也会将这些被选中的节点各自都用b进行包裹。如下：

<div class = 'one'>
	<p>111</p>
</div>
<p>222</p>
<div>333</div>
<p>121212</p>
<div>444</div>
<script>
	var div = $('p');
	div.wrap('<div class = "wrap"></div>');
</script>

　　这段代码将每个p节点都用class为wrap的节点进行包裹，html结构如下：

<div class = 'one'>
    <div class = 'wrap'>
        <p>111</p>
    </div>
</div>
<div class="wrap">
    <p>222</p>
</div>
<div>333</div>
<div class="wrap">
    <p>121212</p>
</div>
<div>444</div>

　　可见每个p节点都被包裹，而且这些p节点都降了一级。包裹的元素占据了p之前的位置。

　　

　　2.  a.wrapAll(b)

　　这个函数的作用是将b所匹配到的节点统一到一起，使用一个a来包裹，因此a只包裹了一次。另外倘若b所匹配到的节点并没有紧挨在一起，那么这个函数会将其他的节点迁移到第一个节点所在的位置，使之与第一个节点成为兄弟节点，然后在进行包裹。

<div class = 'one'>
    <p>111</p>
</div>
<p>222</p>
<div>333</div>
<div>
    <p>121212</p>
</div>
<script>
    var div = $('p');
    div.wrapAll('<div class = "wrap"></div>');
</script>

　　这段代码是将所有的p节点使用div进行包裹，其结果如下：

<div class = 'one'>
    <div class="wrap">
        <p>111</p>
        <p>222</p>
        <p>121212</p>
    </div>
</div>
<div>333</div>
<div>
</div>

　　可见无论其他的p标签在什么位置，都会被迁移到第一个p标签的位置。

 

　　3.   a.wrapInner(b)

　　这个函数的作用是用b将a内部的内容进行包裹。不论是文本节点还是元素节点。

<div class = 'one'>
    <p>111</p>
</div>
<script>
    var div = $('.one');
    div.wrapInner('<div class = "wrap"></div>');
</script>

　　这段代码是将class为one的div的内部内容进行包裹，其结果如下：

<div class = 'one'>
	<div class="wrap">
		<p>111</p>
	</div>
</div>