當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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


用法 
.before( content [, content ] ) => jQuery

說明：在匹配元素集中的每個元素之前插入由參數指定的內容。

  • 添加的版本：1.0.before( content [, content ] )

    • content
      類型：htmlString 或 Element 或 Text 或 Array 或 jQuery
      HTML 字符串、DOM 元素、文本節點、元素數組和文本節點，或要插入到匹配元素集中的每個元素之前的 jQuery 對象。
    • content
      類型：htmlString 或 Element 或 Text 或 Array 或 jQuery
      一個或多個附加 DOM 元素、文本節點、元素數組和文本節點、HTML 字符串或 jQuery 對象，以插入到匹配元素集中的每個元素之前。

  • 添加的版本：1.4.before( function )

    • function
      類型：Function(Integer 索引)=> htmlString 或 Element 或 Text 或 jQuery
      一個返回 HTML 字符串、DOM 元素、文本節點或 jQuery 對象的函數，以插入到匹配元素集中的每個元素之前。接收集合中元素的索引位置作為參數。在函數中，this 指的是集合中的當前元素。

  • 添加的版本：1.10.before( function-html )

    • function-html
      類型：Function(Integer 索引，String html)=> htmlString 或 Element 或 Text 或 jQuery
      一個返回 HTML 字符串、DOM 元素、文本節點或 jQuery 對象的函數，以插入到匹配元素集中的每個元素之前。接收集合中元素的索引位置和元素的舊 HTML 值作為參數。在函數中，this 指的是集合中的當前元素。

.before() 和 .insertBefore() 方法執行相同的任務。主要區別在於語法——特別是內容和目標的位置。使用 .before() ，要插入的內容來自方法的參數：$(target).before(contentToBeInserted) 。另一方麵，對於 .insertBefore() ，內容在方法之前並插入到目標之前，而目標又作為 .insertBefore() 方法的參數傳遞：$(contentToBeInserted).insertBefore(target)。

考慮以下 HTML：

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

您可以創建內容並將其一次插入多個元素之前：

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

每個內部 <div> 元素都會獲得以下新內容：

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

您還可以選擇頁麵上的一個元素並將其插入到另一個元素之前：

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

如果以這種方式選擇的元素被插入到 DOM 中其他位置的單個位置，它將被移動到目標之前(未克隆)：

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

重要提示：但是，如果有多個目標元素，則將為每個目標創建插入元素的克隆副本，最後一個除外。

附加參數

與 .prepend() 和 .after() 等其他內容添加方法類似，.before() 也支持傳入多個參數作為輸入。支持的輸入包括 DOM 元素、jQuery 對象、HTML 字符串和 DOM 元素數組。

例如，以下將在第一段之前插入兩個新的 <div> 和一個現有的 <div>：

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

由於 .before() 可以接受任意數量的附加參數，因此可以通過將三個 <div> 作為三個單獨的參數傳入來實現相同的結果，如下所示： $( "p" ).first().before( $newdiv1, newdiv2, existingdiv1 ) 。參數的類型和數量在很大程度上取決於您如何收集代碼中的元素。

其他注意事項：

  • 在 jQuery 1.9 之前，如果集合中的第一個節點未連接到文檔，.before() 將嘗試在當前 jQuery 集合中添加或更改節點，並且在這些情況下返回一個新的 jQuery 集合而不是原始集合。該方法可能會或可能不會返回新結果，具體取決於其參數的數量或連接性！從 jQuery 1.9 開始，.after()、.before() 和 .replaceWith() 總是返回原始的未修改集。嘗試在沒有父節點的節點上使用這些方法沒有任何效果——也就是說，集合和它包含的節點都不會改變。
  • 根據設計，任何接受 HTML 字符串的 jQuery 構造函數或方法(jQuery()、.append()、.after() 等)都可能執行代碼。這可以通過注入腳本標簽或使用執行代碼的 HTML 屬性(例如，<img onload="">)來實現。不要使用這些方法插入從 URL 查詢參數、cookie 或表單輸入等不受信任的來源獲得的字符串。這樣做會引入cross-site-scripting (XSS) 漏洞。在向文檔添加內容之前刪除或轉義任何用戶輸入。

例子：

在所有段落之前插入一些 HTML。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said...</p>
 
<script>
$( "p" ).before( "<b>Hello</b>" );
</script>
 
</body>
</html>

演示：

在所有段落之前插入一個 DOM 元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said...</p>
 
<script>
$( "p" ).before( document.createTextNode( "Hello" ) );
</script>
 
</body>
</html>

演示：

在所有段落之前插入一個 jQuery 對象(類似於 DOM 元素數組)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said...</p><b>Hello</b>
 
<script>
$( "p" ).before( $( "b" ) );
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .before()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。