jQuery | wrapInner() 示例

wrapInner()是jQuery的一个函数，可以将选择器选中的元素的所有子元素都包装进另一个元素中。

用法

$(selector).wrapInner(wrapper);

selector为要被包装的元素的选择器，wrapper为新的包装元素。

示例

HTML代码

<div class="container">
  <h1>Title</h1>
  <p>Content</p>
</div>

JavaScript代码

$(function() {
  $(".container").wrapInner("<div></div>");
});

在这个例子中，我们使用wrapInner()函数将.container元素内的所有子元素都包装进另一个<div>元素中。最终的HTML结果如下所示：

<div class="container">
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
</div>

注意事项

• wrapInner()函数只能包装目标元素内的子元素，不能包装目标元素本身。如果要包装目标元素本身，应该使用wrap()函数。
• wrapper可以是任何HTML元素或字符串，包括带有类名、ID等属性的元素。我们可以使用jQuery选择器来选中这些元素。
• 可以在wrapper中添加属性和事件，以便在未来操作这些元素。
• wrapInner()函数只能将子元素包装到一个元素中。如果要将每个子元素都包装到单独的元素中，应该使用wrap()函数。

结论

wrapInner()函数是一个非常有用的jQuery函数，可以用于在DOM中包装元素并创建更好的HTML结构。它可以被用于处理复杂的HTML，使其更加容易阅读和操作。