【jQuery】要素の前後・内側に要素を追加する完全ガイド｜append・prepend・before・after

jQueryには要素を追加する方法が複数あります。append()・prepend()・before()・after()・insertBefore()・insertAfter()の使い分けを、実例コードで体系的に解説します。

1. 子要素として追加：append() / prepend()

// append(): コンテンツの末尾（最後の子）に追加
$('#list').append('<li>追加アイテム</li>');

// prepend(): コンテンツの先頭（最初の子）に追加
$('#list').prepend('<li>先頭に追加</li>');

// jQueryオブジェクトで追加（特殊文字があっても安全）
var $item = $('<li>').text('新しいアイテム').addClass('list-item');
$('#list').append($item);

// 複数要素に同じ内容を追加
$('.panel').append('<p>フッターテキスト</p>');

// 既存の要素を移動（コピーではなく移動になる）
$('#container').append($('#existing-element'));

2. 兄弟要素として追加：before() / after()

// after(): 要素の直後（兄弟として）に追加
$('#target').after('<p>ターゲットの直後に追加</p>');

// before(): 要素の直前（兄弟として）に追加
$('#target').before('<p>ターゲットの直前に追加</p>');

// 動的に生成した要素を直後に挿入
var $errorMsg = $('<span>').text('エラーが発生しました').addClass('error-msg');
$('#input-field').after($errorMsg);

// エラーメッセージを削除（後から）
$('#input-field').next('.error-msg').remove();

3. 挿入先を指定する書き方：insertBefore() / insertAfter()

追加したい要素が変数に入っている場合は insertBefore() / insertAfter() が自然な書き方です。

// appendTo(): append()の逆記法（追加する要素.appendTo(追加先)）
$('<li>新しいアイテム</li>').appendTo('#list');

// prependTo()
$('<li>先頭に追加</li>').prependTo('#list');

// insertAfter(): 追加する要素.insertAfter(目印の要素)
$('<p>挿入テキスト</p>').insertAfter('#target');

// insertBefore()
$('<p>前に挿入</p>').insertBefore('#target');

// 使い分けの目安
// 追加先が確定している場合: append() / prepend() / before() / after()
// 追加する要素が変数の場合: appendTo() / prependTo() / insertAfter() / insertBefore()

4. 実用パターン：動的なフォーム行の追加

<div id="form-rows">
  <div class="form-row">
    <input type="text" name="item[]" placeholder="アイテム名">
    <button class="remove-row">削除</button>
  </div>
</div>
<button id="add-row">行を追加</button>

$(function () {
  // 行を追加
  $('#add-row').on('click', function () {
    var $newRow = $('<div>').addClass('form-row').append(
      $('<input>').attr({ type: 'text', name: 'item[]', placeholder: 'アイテム名' }),
      $('<button>').addClass('remove-row').text('削除')
    );
    $('#form-rows').append($newRow);
  });

  // 行を削除（動的追加要素にはon()で委譲）
  $(document).on('click', '.remove-row', function () {
    if ($('.form-row').length > 1) {  // 最低1行は残す
      $(this).closest('.form-row').remove();
    }
  });
});

まとめ

jQueryの要素追加メソッドは書き方が2種類ありますが、「どこに追加するか」「何を追加するか」を整理すれば使い分けは簡単です。文字列でHTMLを渡すと特殊文字のエスケープが必要になるため、$("").text("テキスト") でjQueryオブジェクトを作成してから追加する方が安全です。

関連記事: jQueryのattr()でHTML属性を取得・設定する完全ガイド / jQueryのclone()で要素をコピーする完全ガイド

よくある質問（FAQ）