jQuery | wrapInner() 示例

在jQuery中，wrapInner()方法可以用于向每个选定元素的内容包裹一个HTML结构。

语法

$(selector).wrapInner(wrapper);

• selector ：必需。jQuery选择器。用于选取要包裹其内容的元素。
• wrapper： 必需。一个HTML元素、HTML代码或者函数。用于指定要包裹的HTML结构。

示例

通常情况下，我们可以直接将wrapInner()方法应用在某个HTML DOM元素上。例如：

<div id="container">
  <p>这是要被包裹的内容！</p>
</div>

那么，我们就可以使用如下的jQuery代码将该容器内的<p>标签内容包裹在一个<div>标签内：

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

最终效果如下：

<div id="container">
  <div class="wrapper">
    <p>这是要被包裹的内容！</p>
  </div>
</div>

我们也可以使用函数来创建包裹元素：

function createWrapper() {
  return "<div class='wrapper'></div>";
}

$("#container").wrapInner(createWrapper);

在以上示例中，createWrapper方法返回一个字符串 <div class='wrapper'></div> 表示要包裹的内容。

注意事项

• wrapInner()方法只会包裹元素的内容，不会改变元素本身的结构。
• 如果同一个选择器匹配到多个元素，那么它们的内容都会被包裹在同一个HTML结构中。

以上就是wrapInner()方法的基本用法及示例，希望您能够掌握它的用法。