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

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


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

說明：將參數指定的內容插入到匹配元素集中每個元素的末尾。

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

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

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

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

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

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

考慮以下 HTML：

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

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

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

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

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

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

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

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

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

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

附加參數

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

例如，以下將插入兩個新的 <div> 和一個現有的 <div> 作為正文的最後三個子節點：

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

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

其他注意事項：

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

例子：

將一些 HTML 附加到所有段落。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
 
</body>
</html>

演示：

將一個元素附加到所有段落。

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

演示：

將一個 jQuery 對象(類似於 DOM 元素數組)附加到所有段落。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
 
<script>
$( "p" ).append( $( "strong" ) );
</script>
 
</body>
</html>

演示：

相關用法


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