.prependTo()

類別：操作 > DOM 插入，內部

.prependTo( target )傳回：jQuery

說明：將匹配元素組中的每個元素插入到目標的開頭。

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

考慮以下 HTML

1
2
3
4
5
 
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
 
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>

我們也可以選擇頁面上的元素並將其插入到另一個元素中

1
 
$( "h2" ).prependTo( $( ".container" ) );

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

1
2
3
4
5
 
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

然而，如果有多個目標元素，除了最後一個目標之外，每個目標都會建立插入元素的複製副本。

其他注意事項

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

範例

將所有 span 加到 ID 為「foo」的元素之前（查看 .prepend() 文件以取得更多範例）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prependTo demo</title>
  <style>
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

示範