JQuery中wrap，wrapAll，wrapInner的区别

wrap，wrapAll，wrapInner的区别

这三种包裹方法对于在文档中插入额外的结构化标记往往很有用，现在说明一下三者的区别：wrap是对每一个匹配的元素分别用他元素结构化标记包裹起来，wrapAll是将所有匹配的元素用一个其他元素的结构化标记包裹起来，wrapInner是对每一个匹配元素的内容用其他的结构化标记包裹起来，详细说明如下：
以下是需要包裹的按个段落：

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

现在用一个div进行包裹，其css样式如下：

div{
  background:green;
  float:left;
  margin:10px;
  width:180px;
  height:200px;
}

采用wrap进行包裹：

$("p").wrap("<div></div>");

效果：

<div><p>This is the first paragraph.</p></div>
<div><p>This is the second paragraph.</p></div>
<div><p>This is the third paragraph.</p></div>

采用wrapAll进行包裹：

$("p").wrapAll("<div></div>");

效果：

<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>

采用wrapInner进行包裹：

$("p").wrapInner("<div></div>");

效果：

<p><div>This is the first paragraph.</div></p>
<p><div>This is the second paragraph.</div></p>
<p><div>This is the third paragraph.</div></p>