jQuery中wrap、wrapAll和wrapInner用法以及区别

wrap、wrapAll和wrapInner都是包裹节点，但是在使用的时候总是容易混淆，不太明白具体的区别。简单的来说；

1. wrap(): 将所有匹配元素单独包裹起来
2. wrapAll(): 将所有匹配元素一起包裹起来
3. wrapInner(): 将所有匹配元素的子内容包裹起来

这么官方的解释是不是脑袋还是云里雾里的呢？不用担心，看了下面这几个例子你就定能搞定~

1、源代码如下：

<ul>
  <li>苹果</li>
  <li>橘子</li>
  <li>菠萝</li>
</ul>

2、$("li").wrap("<div></div>");
     每一个选择器都添加

</pre><pre name="code" class="html"><ul>
  <div><li>苹果</li></div>
  <div><li>橘子</li></div>
  <div><li>菠萝</li></div>
</ul>

3、$("li").wrapAll("<div></div>");
     在所有选中的选择器最外面添加

<ul>
  <div>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
  </div>
</ul>

4、$("li").wrapInner("<div></div>");
为选择器的内容添加

<pre name="code" class="html"><ul>
  <li><div>苹果</div></li>
  <li><div>橘子</div></li>
  <li><div>菠萝</div></li>
</ul>