jQueryでDOM要素を末尾に追加する：append(), appendTo()

今回は jQuery で HTML タグやテキストなどの要素を追加する方法について説明します。

jQuery で要素を末尾に追加する場合は、append() や appendTo() を使います。

要素を追加する：append()

append() メソッドは引数に指定した要素を末尾に追加します。append() メソッドの記述方法を以下の通りです。

$(対象の要素).append(追加する要素)

引数には HTML の要素や オブジェクトを指定することができます。

サンプル

HTML

<ul>
  <li>要素１</li>
  <li>要素２</li>
  <li>要素３</li>
</ul>
<button id="button">リスト要素を追加</button>

jQuery

$("#button").on("click", function(){
  $("ul").append("<li>追加要素</li>");
});

上の例では、ボタンを押すたびに ul 要素内の末尾に <li>追加要素</li> が追加されていきます。以下はボタンを１回押した後の 結果です。

<ul>
  <li>要素１</li>
  <li>要素２</li>
  <li>要素３</li>
  <li>追加要素</li>
</ul>

複数の要素を同時に追加する

また、append() には追加する要素を複数個、指定することができます。

$(対象の要素).append(追加する要素1 [, 追加する要素2])

要素を追加する：appendTo()

appendTo() メソッドは append() メソッドと同様に指定した要素を末尾に追加します。

appendTo() メソッドの記述方法は以下の通りです。

$(追加する要素).appendTo(対象の要素)

append() メソッドとはセレクタと引数に渡す要素が反対であることに注意してください。

サンプル

HTML

<ul>
  <li>要素１</li>
  <li>要素２</li>
  <li>要素３</li>
</ul>
<button id="button">リスト要素を追加</button>

jQuery

$("#button").on("click", function(){
  $("<li>追加要素</li>").appendTo("ul");
});

上の例では、ボタンを押すたびに ul 要素内の末尾に <li>追加要素</li> が追加されていきます。以下はボタンを１回押した後の 結果です。

<ul>
  <li>要素１</li>
  <li>要素２</li>
  <li>要素３</li>
  <li>追加要素</li>
</ul>