.insertBefore()

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

考慮以下 HTML

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

我們可以建立內容並同時將其插入多個元素之前

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

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

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

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

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

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

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

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

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

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