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.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面