jQuery文档操作-DOM插入操作-元素周围

.unwrap()

从DOM中移除匹配元素的父元素，将匹配的元素放置在他们的地方

.unwrap()

这个方法不接受任何参数。

.unwrap()方法移除元素的父元素。这是.wrap()的相反的方法。匹配的元素（和他们的兄弟元素，如果有）在DOM结构中替换他们的父元素。

.wrap()

使用htm结构来包裹每一个匹配的元素

.wrap(wrappingElement)

.wrap(function(index))

wrappingElement

类型是字符串，选择器，元素，jQuery对象。

一个HTML片段，选择器表达式，jQuery对象或者DOM元素指定结构来包裹在匹配元素的周围。

function(index)

类型是函数。

一个回调函数返回HTML的内容或者jQuery对象来包裹在匹配元素的周围。接受在集合中的元素的索引位置。在这个函数中，this指向集合中的当前元素。

.wrap()方法能够接收任何字符串或者对象来指定DOM结构。这个结构也许会嵌套多层，但最深层元素只能有一个。这个方法会返回原始元素的集合来做链式的使用。

如下html:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

使用.wrap()，我们能在inner <div>元素周围插入html结构，像这样：

$('.inner').wrap('<div class="new" />');

这样，这个新的<div>元素被动态创建，并且添加到DOM中。得到的结果是新的<div>会包裹每个匹配的元素:

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

这个方法的第二种的形式，允许我们指定一个回调函数。这个回调函数会为每一个匹配的元素调用一次。它应该返回一个DOM元素，jQuery对象，或者HTMl片段来包裹对应的元素。比如：

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

会有如下结果，每一个inner <div>会被和有自己text值对应的class 的div包裹:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll()

给匹配的所有元素包裹html结构

.wrapAll(wrappingElement)

wrappingElement

类型是字符串，选择器，元素，jQuery对象

一个HTML片段，选择器表达式，jQuery对象或者DOM元素指定结构包裹在匹配元素的周围。

.warapAll()方法能够接收任何字符串或者对象来指定DOM结构。这个结构也许会嵌套多层，但最深层元素只能有一个。这个结构，将会包裹匹配集合的所有元素，作为一个单独的一组。

如下代码：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

使用.warpAll()，我们能够在inner <div>元素周围插入HTML结构

$('.inner').wrapAll('<div class="new" />');

这个new <div>元素被动态的创建，并添加到了DOM上。结果是这个<div>元素包裹了所有匹配元素:

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner()

给匹配元素中的每一个元素包裹元素的内容

.wrapInner(wrappingElement)

.wrapInner(function(index))

wrappingElement

类型是字符串。

一个HTML片段，选择器表达式，jQuery对象或者DOM元素指定结构包裹在匹配元素的内容的周围。

function(index)

类型是函数。

一个回调函数生成一个结构包裹在匹配元素内容额周围。接受做为参数的在集合中元素的索引位置。在这个函数中，this指向集合中当前的元素。

.wrapInner()方法能够接收任何字符串或者对象来指定DOM结构。这个结构也许会嵌套多层，但最深层元素只能有一个。这个结构会包裹每个匹配元素的内容。

如下html：

<div class="container">
  <div class="inner">Hello</div>//inner
  <div class="inner">Goodbye</div>
</div>

使用.wrapInner(),我们能在每一个inner<div>的内容周围插入一个html结构

$('.inner').wrapInner('<div class="new" />');

这个new <div>元素被动态的创建，并添加到了DOM中。结果是这个<div>包裹了每个匹配元素内容的周围：

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>//new 
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>//new 
  </div>
</div>

这个方法的第二种形式允许我们指定一个回调函数。这个回调函数会为每一个匹配的元素调用一次。它应该返回一个DOM元素，jQuery对象，或者HTMl片段来包裹对应的元素的内容。比如：

$('.inner').wrapInner(function() {
  return '<div class="' + this.nodeValue + '" />';
});

这样会产生每个inner div的text被class和text对应的div包裹：

<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

Note:当给.wrapInner()函数传递一个字符串选择器时，需要输入是有正确的结束标签的完整的HTML。合法的输入的例子：

$(elem).wrapInner("<div class='test' />");
$(elem).wrapInner("<div class='test'></div>");
$(elem).wrapInner("<div class=\"test\"></div>");