.appendTo()

.append() 和 .appendTo() 方法執行相同的任務。主要差異在於語法，特別是在內容和目標的放置。使用 .append() 時，方法前面的選擇器表達式是插入內容的容器。另一方面，使用 .appendTo() 時，內容會出現在方法前面，可以是選擇器表達式或動態建立的標記，然後插入目標容器中。

考慮以下 HTML

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

我們可以建立內容並同時將其插入多個元素中

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

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

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

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

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

如果以這種方式選擇的元素插入 DOM 中其他單一位置，它將移入目標（不會複製）並傳回包含已插入元素的新集合

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

但是，如果有多個目標元素，則會為最後一個以外的每個目標建立已插入元素的複製副本，並傳回那個新集合（原始元素加上複製副本）。

在 jQuery 1.9 之前，附加到單一元素的情況不會建立新集合，而是傳回原始集合，這使得在使用數量未知的元素時難以可靠地使用 .end() 方法。

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