jQueryのappend()を用いてHTML要素を追加する方法

ここでは、jQueryのappend()メソッドを用いて指定したHTML要素の末尾に指定した要素を挿入する方法について見ていきましょう。

append()メソッド

append()メソッドを用いることで、指定したHTML要素の末尾に指定した要素を挿入することができます。

HTML要素.append(要素1[,要素2]…)

<input type="button" value="リストCを追加" id="btn1">

<ul id="lists">
  <li>リストA</li>
  <li>リストB</li>
</ul>

$(function() {
  $("#btn1").on("click", function() {
    $("#lists").append("<li>リストC</li>");
  });
});

ここで用いているon()は指定したイベントが発生したときに処理を発動させるメソッドです。
詳しくは以下の記事を参照いただけます。
jQueryでクリック時に処理を発動させる方法

<li id="listC">リストC</li>

<input type="button" value="リストCを移動" id="btn2">
<ul id="lists">
  <li>リストA</li>
  <li>リストB</li>
</ul>

$(function() {
  $("#btn2").on("click", function() {
    $("#lists").append($("#listC"));
  });
});

<input type="button" value="リストC・Dを追加" id="btn3">
<ul id="lists">
  <li>リストA</li>
  <li>リストB</li>
</ul>

$(function() {
  $("#btn3").on("click", function() {
    $("#lists").append("<li>リストC</li> <li>リストD</li>");
  });
});

以上のようにappend()メソッドを用いることで、新しくHTML要素を追加したり、既存のHTML要素を別のHTML要素の子要素にしたりすることができます。