JQuery中append()方法的使用

.append()方法：將參數指定的內容插入匹配元素集合中每個元素的末尾

考慮下面代碼：

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

• 最常見的一種用法，創建新內容插入

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

結果每個類屬性是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>

• 此外，還可以在頁面上選擇一個元素並將其插入另一個元素

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

如果以這種方式選擇的元素被插入到DOM中的其他單個位置，它將被移動到目標（不被克隆），結果如下：h2標籤內容移動到了類名爲container的div裏面

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

如果有多個目標元素，則將爲每個目標創建插入元素的克隆副本（移動並克隆）

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

結果：

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