jQueryのappend()の使い方｜要素の追加位置と安全な書き方を初心者向けに解説

「ボタンを押すたびにリストを増やしたい」「取得したデータを既存の要素の最後へ追加したい」と思うことがありますよね。jQueryのappend()を使うと、指定した要素の内側に、新しい子要素を最後の項目として追加できます。

この記事では、append()の基本構文、追加される位置、実際のフォーム例、prepend()・before()・after()との違い、安全に文字列を追加する方法までを初心者向けに解説します。

jQueryのappend()とは
append()で追加される位置
append()へ渡せる内容
入力内容をリストの最後へ追加する
append()で追加した表示
ユーザー入力はHTML文字列として追加しない
追加した要素へクリックイベントを設定する
append()とappendTo()の違い
既存要素をappend()すると移動する
append()で追加できないときの確認項目
まとめ

jQueryのappend()とは

append()は、対象要素の子要素として、指定した内容を一番最後へ挿入するメソッドです。リスト項目、カード、メッセージなどをJavaScriptの処理に合わせて増やせます。

$('#item-list').append('<li>新しい項目</li>');

このコードでは、#item-listの開始タグと終了タグの内側に<li>が追加されます。すでに子要素がある場合は、その一番後ろです。

append()で追加される位置

append()とprepend()は対象要素の内側へ子要素を追加します。before()とafter()は対象要素の外側へ、同じ階層の兄弟要素として追加します。

メソッド	追加位置
`append()`	対象要素の内側・最後
`prepend()`	対象要素の内側・最初
`before()`	対象要素の外側・直前
`after()`	対象要素の外側・直後

<ul id="item-list">
  <li>項目1</li>
  <li>項目2</li>
  <!-- append()はここへ追加する -->
</ul>

append()へ渡せる内容

append()には、HTML文字列、DOM要素、jQueryオブジェクト、テキストノード、配列などを渡せます。複数の内容をまとめて渡すことも可能です。

const $firstItem = $('<li>').text('項目1');
const $secondItem = $('<li>').text('項目2');

$('#item-list').append($firstItem, $secondItem);

HTML文字列を直接書く方法は短い一方、クォーテーションや終了タグを間違えやすくなります。文字列を変数から受け取る場合は、後ほど紹介する.text()を使う書き方が安全です。

入力内容をリストの最後へ追加する

ここからは、フォームへ入力した文字を学習リストの最後へ追加する例を作ります。用意するファイルはindex.html、style.css、script.jsの3つです。

追加前は2件の項目があります。フォームを送信したときにページが再読み込みされないよう、jQuery側で送信処理を止めてから項目を作ります。

HTMLでフォームとリストを作る

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery appendの表示例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="demo">
      <h1>学習リストへ項目を追加する</h1>

      <form id="task-form" class="task-form">
        <label for="task-input">追加する項目</label>
        <div class="task-form__row">
          <input id="task-input" type="text" value="appendの注意点を確認" maxlength="40">
          <button type="submit">最後に追加</button>
        </div>
      </form>

      <ul id="task-list" class="task-list">
        <li>基本構文を確認</li>
        <li>追加位置を確認</li>
      </ul>
      <p id="status" aria-live="polite">現在2件です。</p>
    </main>

    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

labelと入力欄はforとidで関連付けています。状態メッセージのaria-live="polite"は、項目数の変化をスクリーンリーダーへ伝えるための指定です。

CSSで追加された項目を見分ける

.task-form__row {
  display: flex;
  gap: 10px;
}

.task-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.task-list li {
  padding: 14px 16px;
  border-left: 5px solid #2368d8;
  border-radius: 8px;
  background: #f4f7fc;
}

.task-list li.is-new {
  border-left-color: #24a46d;
  background: #eefaf5;
}

@media (max-width: 560px) {
  .task-form__row {
    flex-direction: column;
  }
}

append()で新しいli要素を追加する

script.jsでは、入力値が空でないことを確認してから、新しい<li>を作ります。最後にappend()へ渡すことでリストの末尾へ追加されます。

const $taskList = $('#task-list');
const $taskInput = $('#task-input');
const $status = $('#status');

$('#task-form').on('submit', function (event) {
  event.preventDefault();

  const taskName = $taskInput.val().trim();

  if (taskName === '') {
    $status.text('追加する内容を入力してください。');
    $taskInput.trigger('focus');
    return;
  }

  const $newItem = $('<li>', { class: 'is-new' }).text(taskName);
  $taskList.append($newItem);

  $status.text(`現在${$taskList.children().length}件です。`);
  $taskInput.val('').trigger('focus');
});

event.preventDefault()でフォーム本来の送信を止めています。追加後はchildren().lengthで現在の子要素数を数え、メッセージを更新します。

jQueryでイベントを設定するためのonメソッドについて解説

append()で追加した表示

入力した「appendの注意点を確認」が3件目として追加されました。新しい項目だけis-newクラスを付けているため、緑色で見分けられます。

ユーザー入力はHTML文字列として追加しない

append()へHTML文字列を渡すと、その文字列はHTMLとして解釈されます。URLのパラメーター、フォーム入力、外部APIの値など、信用できない文字列をそのまま渡すと、XSS（クロスサイトスクリプティング）の原因になります。

// 避けたい書き方
$('#task-list').append('<li>' + taskName + '</li>');

// 文字として安全に追加する書き方
const $newItem = $('<li>').text(taskName);
$('#task-list').append($newItem);

.text()を使うと、入力に<img>などが含まれていてもタグとして実行せず、画面上の文字として扱います。HTMLを許可する必要がある場合は、サーバー側を含めた適切なサニタイズが必要です。

追加した要素へクリックイベントを設定する

ページ読み込み後に追加される要素は、最初の時点ではDOMに存在しません。親要素へイベントを設定する「イベント委譲」を使うと、あとから追加した項目もクリックできます。

$('#task-list').on('click', 'li', function () {
  $(this).toggleClass('is-complete');
});

イベントを受け取る#task-listは最初から存在しているため、その内側で発生したクリックを確認できます。動的に追加するボタンやカードにも使える書き方です。

append()とappendTo()の違い

append()とappendTo()は同じ挿入を行いますが、対象と追加内容を書く順番が逆です。

// 対象.append(追加内容)
$('#task-list').append($newItem);

// 追加内容.appendTo(対象)
$newItem.appendTo('#task-list');

処理結果は同じです。既存コードの書き方や、「対象」と「追加内容」のどちらを先に読みたいかに合わせて統一してください。

既存要素をappend()すると移動する

すでにページ内にある要素をappend()すると、同じ要素が複製されるのではなく、指定先の最後へ移動します。

const $notice = $('#important-notice');
$('#task-list').append($notice);

元の位置にも残したい場合は、clone()で複製してから追加します。ただし、同じidを持つ要素が複数できないよう注意してください。

append()で追加できないときの確認項目

jQueryの読み込み順：jQuery本体をscript.jsより先に読み込みます。
対象セレクタ：$('#task-list').lengthが0なら対象を取得できていません。
追加位置：append()は対象の外側ではなく、内側の最後です。
HTMLの文法：HTML文字列の終了タグやクォーテーションを確認します。
フォームの再読み込み：event.preventDefault()を忘れると、追加直後にページが再読み込みされる場合があります。
イベント：あとから追加した要素にはイベント委譲を使います。
既存要素の移動：複製したい場合はclone()が必要です。

まとめ

append()は、対象要素の内側・最後へ子要素を追加します。
最初へ追加する場合はprepend()、外側へ追加する場合はbefore()やafter()を使います。
ユーザー入力はHTML文字列へ連結せず、.text()で文字として追加します。
追加した要素のイベントには、親要素を使ったイベント委譲が便利です。
既存要素を追加すると元の位置から移動します。

まずは記事内の3ファイルを同じフォルダへ保存し、項目が末尾へ追加される位置、空欄時のメッセージ、追加後の件数を順番に確認してみてください。