【jQuery】要素の追加・削除（append・remove・html）

JavaScript
2026.05.26

こんにちは、かつコーチです。

「ボタンを押したらリストに項目を追加したい」「不要になった要素を消したい」。

こうしたUIを作るときに欠かせないのが、要素の追加・削除に関するメソッド群です。

この記事では、append・prepend・remove・emptyの違いや、html()とtext()の使い分けについて、初心者向けに整理して解説します。

読み終わる頃には、DOM（HTML要素の構造）を自由に組み立てたり片付けたりできるようになります。

要素を追加するメソッド

append()とprepend()

append()は、要素の最後に新しい要素を追加するメソッドです。

<ul id="list">
  <li>1件目</li>
</ul>

$('#list').append('<li>2件目</li>');

<ul id="list">
  <li>1件目</li>
  <li>2件目</li>
</ul>

反対に、prepend()は要素の先頭に追加します。

$('#list').prepend('<li>0件目</li>');

<ul id="list">
  <li>0件目</li>
  <li>1件目</li>
  <li>2件目</li>
</ul>

「後ろに足すか、前に足すか」の違いだけなので、名前と挙動をセットで覚えておきましょう。

appendTo()とprependTo()

append()とほぼ同じ処理を、逆の書き方で行うのがappendTo()です。

// どちらも同じ結果になる
$('#list').append('<li>3件目</li>');
$('<li>3件目</li>').appendTo('#list');

主語（どちらを基準に書くか）が違うだけで、結果は同じです。

すでに変数として要素を持っている場合は、appendTo()のほうが読みやすいこともあります。

const $newItem = $('<li>新しい項目</li>');
$newItem.appendTo('#list');

before()とafter()

特定の要素の直前・直後に追加したい場合は、before()・after()を使います。

$('#list li:first').before('<li>先頭より前</li>');
$('#list li:last').after('<li>末尾より後</li>');

親要素の中の位置ではなく、指定した要素そのものの前後に追加する点がappend/prependとの違いです。

要素を削除するメソッド

remove()

remove()は、要素そのものをDOMから完全に削除します。

$('#list li:first').remove();

削除すると、その要素に付けていたイベントやデータも一緒に消えます。

empty()

empty()は、要素自体は残したまま、中身（子要素）だけを空にします。

$('#list').empty();

<ul id="list"></ul>

remove()との違いは、「要素自体を消すか」「中身だけ消すか」です。

リストの箱（<ul>）は残して中の項目（<li>）だけ全部消したいならempty()、箱ごと消したいならremove()を使います。

よくあるつまずきポイント・エラー対処

remove()した要素にイベントを付け直しても反応しない

remove()は要素を完全にDOMから取り除くため、削除した要素に対する後続の操作は無視されます。

❌ Before（つまずいた書き方）

const $item = $('#list li:first');
$item.remove();

// 削除した要素に色を付けようとした
$item.css('color', 'red');
// エラーは出ないが、画面には何も反映されない

エラーメッセージは出ないのに、画面に変化が起きず「なぜ動かないんだろう」と原因を探すのに時間がかかりました。

原因は単純で、remove()した時点で$itemはもうDOMツリーに存在しない要素を指していたからです。

✅ After（正しい書き方）

const $item = $('#list li:first');

// 先に見た目を変えてから、少し待って削除する
$item.css('color', 'red');

setTimeout(function() {
  $item.remove();
}, 500);

要素に対する操作は、remove()を呼ぶ前に済ませておく必要があります。

「消してから操作する」のではなく、「操作してから消す」という順番を意識してください。

html()とtext()を混同して意図しない表示になる

html()とtext()は、どちらも要素の中身を取得・設定するメソッドですが、扱い方が異なります。

❌ Before（つまずいた書き方）

const userInput = '<strong>重要</strong>なお知らせ';

$('#message').text(userInput);

<strong>重要</strong>なお知らせ

text()を使うと、HTMLタグがタグとして解釈されず、そのまま文字列として表示されてしまいます。

太字にしたかったのに、タグの記号がそのまま画面に出てしまい、「なぜ反映されないんだろう」と混乱しました。

✅ After（正しい書き方）

const userInput = '<strong>重要</strong>なお知らせ';

$('#message').html(userInput);

重要なお知らせ

（「重要」の部分が太字で表示される）

html()を使うと、渡した文字列がHTMLタグとして解釈されます。

逆に言えば、外部から受け取った文字列（フォーム入力など）をhtml()でそのまま表示すると、意図しないタグが実行されてしまう危険があります。

ユーザーが入力した文字列を表示するときはtext()を、自分で用意した安全なHTMLを表示するときはhtml()を使う、と使い分けるのが安全です。

応用・一歩先の使い方

clone()と組み合わせて要素を複製する

既存の要素を複製してから追加したい場合は、clone()と組み合わせます。

const $original = $('#list li:first');
const $copy = $original.clone();

$('#list').append($copy);

clone()を使わずに同じ要素をそのままappend()すると、要素が「移動」してしまい複製にはならないので注意してください。

replaceWith()で要素をまるごと置き換える

要素の中身だけでなく、要素自体を別のものに置き換えたい場合はreplaceWith()が便利です。

$('#list li:first').replaceWith('<li class="highlight">置き換え後</li>');

タグの種類ごと変更したいときなど、html()では対応できない場面で活躍します。

まとめ

この記事のポイント

  • append()は末尾、prepend()は先頭に要素を追加する
  • remove()は要素ごと削除、empty()は中身だけを削除する
  • remove()した要素には後から操作を加えられない
  • text()はタグをそのまま文字列表示、html()はタグとして解釈する

次に読むべき記事

  • CSSクラスの操作（addClass・removeClass・toggleClass）
  • each()で要素をループ処理する
  • 属性・データ属性の取得と操作（attr・data）

タグ: jQuery, 初心者向け, DOM操作

タイトルとURLをコピーしました