jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()的用法及其区别

在jQuery中有三总包裹节点的方法

1.wrap()：将每一个匹配到的子元素进行包裹(一对一 单独包裹，直接添加父元素)
2.wrapInner()： 给一堆同级别的元素添加父元素
3.wrapAll(): 给一堆元素添加同一个父元素

三者中比较好理解的就是wrap()和wrapInner()
例如：
body中存在1个hello world！
此时分别执行$(‘em’).wrap(’’);
$(‘em’).wrapInner(’’);
得到的结果：

从html结构可以看出：wrap是在选定元素外面包裹你设置的元素，而wrapInner()是在选定元素内部（元素的内容）包裹你设置的元素。
通俗来讲：wrap(‘p’) ; p指的是你设置的元素，该元素做爸爸，而wrapInner(‘p’)，p做儿子。

最后来看wrapAll():给一堆元素添加同一个父元素
第一种情况：
所有的同级元素连在一起：

 <em>hello world！</em>
    <em>hello world！</em>
    <em>hello world！</em>
    <em>hello world！</em>

结果：

2.如果选定的元素不是连续的(或者不在同一级别)
给以下情况分别执行 $(‘em’).wrapAll(’’);
2.1 选定元素排列是分散的

   <em>hello world！</em>
    <em>hello world！</em>
    <strong>  You are  cool！</strong>
    <em>hello world！</em>
    <strong>  You are  cool！</strong>
    <em>hello world！</em>

结果：

2.2：选定元素不是同一级别：

    <em>hello world！</em>
    <em>hello world！</em>
    <p>
    <strong>You are cool！</strong>
    <em>hello world！</em>
    </p>
    <em>hello world！</em>
    <em>hello world！</em>

结果：

此时的结果p标签中的em标签中的内容跳出，被添加的b标签包裹了。
2.3：
在上述2.2的情况下执行 $(‘b’).wrapAll(’

’)
结果：

根据操作后的html结构我得出的结论：
wrapAll()执行分为三步：
1.找到所有元素提取后的选定元素的先后顺序进行排列，其中第一个选定的元素在文档中的位置不变。（如果选定元素有后代，一并提取）。
所有的元素在文档中都有个先后顺序，那么我们提取的元素，无论是多少个，那么它们的排列顺序就像在文档中原先的顺序一样，在前面的元素永远在前面，在后面的元素永远在后面，
我们选中的所有元素只有第一个元素在文档中的位置不变，其它选中的元素与其在同一级别并排列在首位元素（e:first）的后面。
2将所有匹配元素用一个元素包裹。
3、文档中剩余的元素按原先的方式进行排列，只不过其中选中的元素已经被取走了。就像例子2.2中p元素下的em元素。
wrapAll()对比wrap与wrapInner()来说较复杂一点