# .wrapInner()

所属分类：DOM 操作 > DOM 插入并包裹现有内容 英文文档：.wrapInner()

## .wrapInner( wrappingElement )返回: jQuery

描述: 在匹配元素里的内容外包一层结构。

- #### 添加的版本: 1.2.wrapInner( wrappingElement )

  - wrappingElement
    类型: String
    用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素。

- #### 添加的版本: 1.4.wrapInner( function(index) )

  - function(index)
    类型: Function()
    一个返回HTML结构的函数，用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中 ，`this`指向集合中当前的元素。/div>

    `.wrapInner()`函数可以接受任何字符串或对象，可以传递给`$()`工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。

    考虑下面的HTML：

    1 2 3 4 |
        <div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>

    用`.wrapInner()`, 我们可以再inner元素的内容外加一个新的`<div>`元素，像这样:

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

    结果如下：

    1 2 3 4 5 6 7 8 |
        <div class="container">  <div class="inner">    <div class="new">Hello</div>  </div>  <div class="inner">    <div class="new">Goodbye</div>  </div></div>

    该方法的第二种用法允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容。例如：

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

    这将使得每个`<div>`有和他文本内容一样名字的class:

    1 2 3 4 5 6 7 8 |
        <div class="container">  <div class="inner">    <div class="Hello">Hello</div>  </div>  <div class="inner">    <div class="Goodbye">Goodbye</div>  </div></div>

    注意: 当通过一个选择器字符串传递给`.wrapInner()` 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。下面是一些正确的例子：

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

    ## 例子:

    #### Example: 选中所有段落，然后在段落内容外加粗体：

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
        <!DOCTYPE html><html><head>  <style>p { background:#bbf; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p>   <p>cruel</p>  <p>World</p><script>$("p").wrapInner("<b></b>");</script> </body></html>

    #### Demo:

    #### Example: 为 body 元素的内容包裹一个对象树

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
        <!DOCTYPE html><html><head>  <style>   div { border:2px green solid; margin:2px; padding:2px; }  p { background:yellow; margin:2px; padding:2px; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  Plain old text, or is it?<script>$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");</script> </body></html>

    #### Demo:

    #### Example: 选择所有的段落，并用 b 标签包裹每个匹配元素的内容。

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
        <!DOCTYPE html><html><head>  <style>p { background:#9f9; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p>   <p>cruel</p>  <p>World</p><script>$("p").wrapInner(document.createElement("b"));</script> </body></html>

    #### Demo:

    #### Example: 选择所有的段落，并用 jQuery object 包裹每个匹配元素的内容。

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
        <!DOCTYPE html><html><head>  <style>   p { background:#9f9; }  .red { color:red; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p>  <p>cruel</p>  <p>World</p><script>$("p").wrapInner($("<span class='red'></span>"));</script> </body></html>

    #### Demo: