.prepend() | jQuery API 文件

.prepend( content [, content ] )傳回： jQuery

說明： 將由參數指定的內容插入到已配對元素集合中每個元素的開頭。

新增版本： 1.0.prepend( content [, content ] )
- content
  
  類型： htmlString 或 Element 或 Text 或 Array 或 jQuery
  
  DOM 元素、文字節點、元素和文字節點陣列、HTML 字串或 jQuery 物件，用於插入已配對元素集合中每個元素的開頭。
- content
  
  類型： htmlString 或 Element 或 Text 或 Array 或 jQuery
  
  一個或多個附加的 DOM 元素、文字節點、元素陣列和文字節點、HTML 字串或 jQuery 物件，用於插入在配對元素集合中每個元素的開頭。
版本新增：1.4.prepend( function )
- 函式
  
  類型：函式( 整數 elementOfArray, 字串 html ) => html 字串或元素或文字或 jQuery
  
  一個函式，用於傳回一個 HTML 字串、DOM 元素、文字節點或 jQuery 物件，以插入在配對元素集合中每個元素的開頭。接收集合中元素的索引位置和元素的舊 HTML 值作為引數。在函式中，this 指的是集合中的目前元素。

.prepend() 方法將指定內容插入為 jQuery 集合中每個元素的第一個子元素（若要將其插入為最後一個子元素，請使用 .append()）。

.prepend() 和 .prependTo() 方法執行相同的任務。主要的差異在於語法，特別是在內容和目標的配置。使用 .prepend() 時，方法前面的選擇器表示法是將內容插入其中的容器。另一方面，使用 .prependTo() 時，內容會出現在方法前面，作為選擇器表示法或動態建立的標記，並插入到目標容器中。

考量下列 HTML

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

您可以建立內容並一次插入到多個元素中

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

每個 <div class="inner"> 元素都會取得這個新內容

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

您也可以在頁面上選取一個元素並插入到另一個元素中

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

如果以這種方式選取單一元素並插入到 DOM 中的其他單一位置，它將會移到目標中（不會複製）

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

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

其他引數

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

例如，下列會將兩個新的 <div> 和一個現有的 <div> 插入為 body 的前三個子節點

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

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

其他注意事項

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

範例

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

	
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>there, friend!</p>
<p>amigo!</p>
 
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 
</body>
</html>

示範

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

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

示範

在所有段落之前加入一個 jQuery 物件（類似於 DOM 元素陣列）。

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

jQuery API 文件

.prepend( content [, content ] )傳回： jQuery

新增版本： 1.0.prepend( content [, content ] )

版本新增：1.4.prepend( function )

其他引數

其他注意事項

示範

示範

示範