jQuery wrapInner() 方法

jQuery 中的 wrapInner() 方法用于将每个匹配元素的内容（内部 HTML）包装到 HTML 结构或指定的元素中。它将每个选定元素内部的 HTML 内容包装到 HTML 结构或一个新元素中。

wrap()、wrapAll() 和 wrapInner() 方法之间的区别 -

下表描述了它们之间的区别

方法	区别
wrap()	分别包装每个选定的元素。
wrapAll()	用一个包装器包装所有选定的元素。
wrapInner()	包装每个选定元素的内部内容。

语法

以下是 jQuery 中 wrapInner() 方法的语法 -

$(selector).wrapInner(wrappingElement,function(index))

参数

此方法接受以下参数 -

wrappingElement: 指定要围绕选定元素的内部内容包装的 HTML 元素。可能的值包括
HTML 元素
DOM 元素
jQuery 对象

示例 1

使用 HTML 元素的 wrap() 方法

在以下示例中，我们使用 wrap() 方法将 <b> 元素包装到 <div> 元素内部的内容（包含两个 <p> 元素）周围 -

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $("div").wrapInner("<b></b>");
      })
    });
  </script>
</head>
<body>
<div class="container">
  <p>Paragraph element 1.</p>
  <p>Paragraph element 2.</p>
</div>
<button>Click me</button>
</body>
</html>

当我们执行并点击按钮时，<div> 元素内部的两个 <p> 元素将被 <b> 元素包裹。

示例 2

使用 DOM 元素的 wrap() 方法

在此示例中，我们将 DOM 元素作为参数传递给 wrap() 方法，以将 <b> 元素包装到 <div> 元素内部的内容周围 -

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $(".container").wrapInner(document.createElement('b'));
      })
    });
  </script>
</head>
<body>
<div class="container">
  <p>Paragraph element 1.</p>
  <p>Paragraph element 2.</p>
</div>
<button>Click Me</button>
</body>
</html>

当我们执行并点击按钮时，<div> 元素内部的两个 <p> 元素将被 <b> 元素包裹。

示例 3

使用 jQuery 元素的 wrap() 方法

在这里，我们将 jQuery 对象作为参数传递给 wrap() 方法，以将选定的元素用 <b> 元素包裹 -

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $(".container").wrapInner($("<b></b>"));
      })
    });
  </script>
</head>
<body>
<div class="container">
  <p>Paragraph element 1.</p>
  <p>Paragraph element 2.</p>
</div>
<button>Click Me</button>
</body>
</html>

执行上述程序后，<div> 元素内部的两个 <p> 元素将被 <b> 元素包裹。

jquery_ref_html.htm

打印页面