.insertAfter()

類別： 操作 > DOM 插入，外部

.insertAfter( target )傳回： jQuery

說明： 將匹配元素集合中的每個元素插入目標之後。

.after() 和 .insertAfter() 方法執行相同的任務。主要差異在於語法，特別是在內容和目標的放置。使用 .after() 時，方法前面的選擇器表達式是插入內容之後的容器。另一方面，使用 .insertAfter() 時，內容在方法前面，作為選擇器表達式或動態建立的標記，並插入目標容器之後。

考慮以下 HTML

1
2
3
4
5
 
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

我們可以建立內容並同時插入到多個元素之後

1
 
$( "<p>Test</p>" ).insertAfter( ".inner" );

每個內部的 <div> 元素都會取得這個新內容

1
2
3
4
5
6
7
 
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

我們也可以選擇頁面上的元素並將其插入到另一個元素之後

1
 
$( "h2" ).insertAfter( $( ".container" ) );

如果以這種方式選取的元素插入到 DOM 中其他位置的單一位置，它將會被移到目標之後（不會複製），並會傳回一個包含已插入元素的新集合

1
2
3
4
5
 
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

然而，如果有多個目標元素，則會為第一個目標之後的每個目標建立已插入元素的複製副本，並傳回那個新集合（原始元素加上複製副本）。

在 jQuery 1.9 之前，附加到單一元素的情況不會建立一個新集合，而是傳回原始集合，這使得在使用未知數量的元素時難以可靠地使用 .end() 方法。

其他注意事項

  • 根據設計，任何接受 HTML 字串的 jQuery 建構函式或方法（例如 jQuery()、.append()、.after() 等）都有可能執行程式碼。這可能會透過注入 script 標籤或使用執行程式碼的 HTML 屬性（例如 <img onload="">）來發生。請勿使用這些方法來插入從不可信來源（例如 URL 查詢參數、Cookie 或表單輸入）取得的字串。這樣做可能會造成跨網站指令碼（XSS）漏洞。在將內容新增到文件之前，請移除或跳脫任何使用者輸入。
  • jQuery 官方不支援 SVG。除非該方法有明確的文件說明，否則在 SVG 文件上使用 jQuery 方法可能會導致意外的行為。支援 SVG 的方法範例（截至 jQuery 3.0）包括 addClass 和 removeClass。

範例

在 id 為「foo」的元素之後插入所有段落。與 $( "#foo" ).after( "p" ) 相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertAfter demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p> is what I said... </p>
<div id="foo">FOO!</div>
 
<script>
$( "p" ).insertAfter( "#foo" );
</script>
 
</body>
</html>

示範