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

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


用法 
.prependTo( target ) => jQuery

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

  • 添加的版本：1.0.prependTo( target )

    • target
      類型：Selector 或 htmlString 或 Element 或 Array 或 jQuery
      選擇器、元素、HTML 字符串、元素數組或 jQuery 對象；匹配的元素集將插入此參數指定的元素的開頭。

.prepend() 和 .prependTo() 方法執行相同的任務。主要區別在於syntax-specifically，內容和目標的放置。對於 .prepend() ，方法前麵的選擇器表達式是插入內容的容器。另一方麵，對於 .prependTo() ，內容在方法之前，作為選擇器表達式或作為動態創建的標記，它被插入到目標容器中。

考慮以下 HTML：

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

我們可以創建內容並一次將其插入到多個元素中：

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

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

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

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

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

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

<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 或表單輸入等不受信任的來源獲得的字符串。這樣做會引入cross-site-scripting (XSS) 漏洞。在向文檔添加內容之前刪除或轉義任何用戶輸入。
  • jQuery 不正式支持 SVG。在 SVG 文檔上使用 jQuery 方法，除非為該方法明確記錄，否則可能會導致意外行為。從 jQuery 3.0 開始支持 SVG 的方法示例是 addClass 和 removeClass 。

例子：

將所有跨度添加到 ID 為 "foo" 的元素(查看 .prepend() 文檔以獲取更多示例)

<!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.5.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

演示：

相關用法


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