JQuery .insertBefore()用法及代碼示例

.before() 和 .insertBefore() 方法執行相同的任務。主要區別在於syntax-specifically，內容和目標的放置。對於 .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 之前，append-to-single-element case 沒有創建新的集合，而是返回了原來的集合，這使得很難使用.end()當與未知數量的元素一起使用時，該方法可靠。

• 根據設計，任何接受 HTML 字符串的 jQuery 構造函數或方法(jQuery()、.append()、.after() 等)都可能執行代碼。這可以通過注入腳本標簽或使用執行代碼的 HTML 屬性(例如，<img onload="">)來實現。不要使用這些方法插入從 URL 查詢參數、cookie 或表單輸入等不受信任的來源獲得的字符串。這樣做會引入cross-site-scripting (XSS) 漏洞。在向文檔添加內容之前刪除或轉義任何用戶輸入。
• jQuery 不正式支持 SVG。在 SVG 文檔上使用 jQuery 方法，除非為該方法明確記錄，否則可能會導致意外行為。從 jQuery 3.0 開始支持 SVG 的方法示例是 addClass 和 removeClass 。