.after()

.after() 和 .insertAfter() 方法執行相同的任務。主要的差異在於語法，特別是在內容和目標的放置上。使用 .after() 時，要插入的內容來自方法的引數：$(target).after(contentToBeInserted)。另一方面，使用 .insertAfter() 時，內容會出現在方法之前，並插入到目標之後，而目標則傳遞為 .insertAfter() 方法的引數：$(contentToBeInserted).insertAfter(target)。

使用以下 HTML

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

可以建立內容，然後一次插入到多個元素之後

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

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

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

DOM 中的元素也可以選取並插入到另一個元素之後

$( ".container" ).after( $( "h2" ) );

如果以這種方式選取的元素插入到 DOM 中其他地方的單一位置，則會將其移動，而不是複製

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

重要事項：不過，如果有多個目標元素，則會為每個目標（最後一個目標除外）建立已插入元素的複製副本。

傳遞函式

從 jQuery 1.4 開始，.after() 支援傳遞傳回要插入元素的函式。

$( "p" ).after(function() {
  return "<div>" + this.className + "</div>";
});

此範例會在每個段落之後插入 <div>，每個新的 <div> 都包含其前一個段落的類別名稱。

其他引數

與其他新增內容的方法（例如 .prepend() 和 .before()）類似，.after() 也支援將多個引數傳入作為輸入。支援的輸入包括 DOM 元素、jQuery 物件、HTML 字串和 DOM 元素陣列。

例如，以下會在第一個段落之後插入兩個新的 <div> 和一個現有的 <div>

var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );

由於 .after() 可以接受任意數量的其他引數，因此可以透過將三個 <div> 傳入作為三個獨立的引數來達成相同的結果，如下所示：$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 )。引數的類型和數量在很大程度上取決於程式碼中收集的元素。

• 在 jQuery 1.9 之前，如果集合中的第一個節點未連接到文件，.after() 會嘗試新增或變更當前 jQuery 集合中的節點，並在這些情況下傳回新的 jQuery 集合，而非原始集合。此方法可能會或可能不會傳回新的結果，具體取決於其參數的數量或連接性！從 jQuery 1.9 開始，.after()、.before() 和 .replaceWith() 始終傳回原始未修改的集合。嘗試對沒有父項目的節點使用這些方法不會產生任何效果，也就是說，集合及其包含的節點都不會變更。
• 根據設計，任何接受 HTML 字串的 jQuery 建構函式或方法（例如 jQuery()、.append()、.after() 等）都可能執行程式碼。這可能是透過注入腳本標籤或使用會執行程式碼的 HTML 屬性（例如 <img onload="">）發生的。請勿使用這些方法插入從不可信來源（例如 URL 查詢參數、Cookie 或表單輸入）取得的字串。這麼做可能會造成跨網站腳本（XSS）漏洞。在將內容新增到文件之前，請移除或跳脫任何使用者輸入。