jQuery包裹节点方法wrap()、wrapAll()、wrapInner()的区别

1.wrap()方法

原始DOM代码：

<div id="container">
  <div>姓名：小明</div>
  <div>年龄：20岁</div>
</div>

使用wrap()：

$("#container").wrap('<div class="wrapper"></div>');

处理后DOM代码：

<div class="wrapper">
  <div id="container">
    <div>姓名：小明</div>
    <div>年龄：20岁</div>
  </div>
</div>

效果：给$选择器的所有元素外部包裹一层wrapper

2.wrapAll()方法

原始DOM代码：

<div id="container">
    <p>姓名：小明</p>
    <p>年龄：20岁</p>
    <div>性别：男<div>
</div>

使用wrapAll()：

$("p").wrapAll('<div class="wrapper"></div>');

处理后DOM代码：

<div id="container">
  <div class="wrapper">
    <p>姓名：小明</p>
    <p>年龄：20岁</p>
  </div>
  <div>性别：男<div>
</div>

效果：给$选择器的全部匹配元素的外部包裹一层wrapper

3.wrapInner()方法

原始DOM代码：

<div id="container">
  <div>姓名：小明</div>
  <div>年龄：20岁</div>
</div>

使用wrapInner()：

$("#container").wrapInner('<div class="wrapper"></div>');

处理后DOM代码：

<div id="container">
  <div class="wrapper">
    <div>姓名：小明</div>
    <div>年龄：20岁</div>
  </div>
</div>

效果：给$选择器的所有元素内部包裹一层wrapper