jQueryでHTMLを追加する方法｜append・prepend・before・afterの違いを解説

jQueryでHTMLを追加したいとき、append()やprepend()、before()、after()のどれを使うべきか迷うことがありますよね。

対象要素の中へ追加するならappend()またはprepend()、対象要素の外側へ追加するならbefore()またはafter()を使います。

この記事では、4つの追加メソッドの位置関係と、html()による置き換えとの違いを、実際に動くコードとブラウザ表示で解説します。

jQueryでHTMLを追加する4つの方法

「中か外か」と「先頭・前か、末尾・後か」の2点で選ぶと覚えやすいです。最初に、よく使うappend()とprepend()から試してみましょう。

append()で末尾へHTMLを追加する

append()は、選択した親要素の中の一番後ろへHTMLを追加します。次のリストを変更前の状態として用意します。

<ul class="item-list" id="item-list">
  <li>既存の項目A</li>
  <li>既存の項目B</li>
</ul>

jQueryを読み込んだ後のscript.jsへ、次のコードを追加してください。

jQuery(function ($) {
  $('#item-list').append('<li class="new">append()で末尾に追加</li>');
});

$('#item-list')で追加先のul要素を選び、append()の引数へ追加したいHTML文字列を渡しています。

prepend()なら先頭へ追加できる

同じ親要素の先頭へ追加したい場合は、prepend()を使います。2つを同時に実行すると、追加位置の違いが分かりやすくなります。

jQuery(function ($) {
  $('#item-list').prepend('<li class="new">prepend()で先頭に追加</li>');
  $('#item-list').append('<li class="new">append()で末尾に追加</li>');
});

実行後は、既存項目を残したまま先頭と末尾へ新しいli要素が加わります。

サンプルでは追加位置を見分けやすくするため、新しく追加した要素へnewというclassを付けています。装飾はstyle.cssへ記述します。

.item-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.item-list li {
  padding: 14px 18px;
  border: 2px solid #d4dfeb;
  border-radius: 10px;
}

.item-list .new {
  border-color: #2474b5;
  background: #eaf5ff;
  color: #15588f;
  font-weight: 700;
}

before()とafter()で要素の外側へ追加する

before()とafter()は、選択した要素と同じ階層へHTMLを追加します。対象要素の中ではなく、兄弟要素として前後へ置かれるのがポイントです。

<div class="outside-stack">
  <div class="target" id="target">基準になる要素</div>
</div>

jQuery(function ($) {
  $('#target').before('<div class="outside-item">before()で前に追加</div>');
  $('#target').after('<div class="outside-item">after()で後に追加</div>');
});

実行すると、before()のHTMLは基準要素の直前、after()のHTMLは直後に表示されます。

4つのメソッドはHTMLを追加する位置だけが異なります。引数へHTML文字列を渡す基本形は同じなので、追加先を基準に選んでください。

html()は追加ではなく中身を置き換える

html()へ値を渡すと、対象要素の中にある既存コンテンツを削除し、新しいHTMLへ置き換えます。現在の内容を残したい場合はappend()などを使いましょう。

<div id="notice">
  <p>古いお知らせ</p>
</div>

jQuery(function ($) {
  $('#notice').html('<p class="new-content">新しいお知らせ</p>');
});

実行後は「古いお知らせ」が残らず、「新しいお知らせ」へ置き換わります。

引数を渡さず$('#notice').html()と書いた場合は、置き換えではなく現在のHTMLを文字列として取得します。

HTML文字列を変数にして追加する

追加するHTMLが少し長い場合は、変数へ入れてからappend()へ渡すと読みやすくなります。テンプレートリテラルはバッククォートで囲み、複数行の文字列をそのまま書けるJavaScriptの記法です。

jQuery(function ($) {
  const cardHtml = `
    <article class="card">
      <h2>新しい記事</h2>
      <p>記事の説明文です。</p>
    </article>
  `;

  $('#card-list').append(cardHtml);
});

開始タグと終了タグの対応を確認し、HTMLの属性をダブルクォート、JavaScriptの外側をバッククォートにすると引用符の混乱を減らせます。

入力値はtext()で追加すると安全

フォーム入力やAPIのデータなど、利用者が変更できる文字列をHTMLへ直接連結すると、意図しないタグやスクリプトが実行される危険があります。

単なるテキストとして表示したい値は、要素を作成してtext()へ渡してください。HTMLとして解釈されず、文字として追加されます。

jQuery(function ($) {
  const userInput = $('#name').val();
  const $item = $('<li>').text(userInput);

  $('#user-list').append($item);
});

HTMLを追加できないときの確認ポイント

追加先のセレクターが間違っている

classで選ぶときは$('.item-list')、idで選ぶときは$('#item-list')と書きます。追加先が見つからない場合、エラーが出なくても画面は変化しません。

jQueryまたはHTMLの読み込み前に実行している

$ is not definedと表示される場合は、jQuery本体の読み込み順を確認してください。また、対象HTMLの読み込み後に実行できるよう、今回のコードはjQuery(function ($) { ... });で囲んでいます。

同じ要素を複数箇所へ追加している

すでに存在するjQueryオブジェクトを別の場所へappend()すると、基本的にはコピーではなく移動になります。元の要素も残したい場合はclone()で複製します。

jQuery(function ($) {
  const $card = $('.card').first();
  $('#another-list').append($card.clone());
});

追加したHTMLを削除したい場合

要素ごと削除するならremove()、親要素を残して中身だけ空にするならempty()を使います。違いと使い分けは、次の記事で実際のコードと表示結果を確認できます。

append()の詳しい使い方や、既存要素を移動する例は次の記事で解説しています。

まとめ

• append()は対象要素の中の末尾へ追加する
• prepend()は対象要素の中の先頭へ追加する
• before()とafter()は対象要素の外側へ追加する
• html()は既存の中身を新しいHTMLへ置き換える
• 利用者が入力した文字列は、要素を作ってtext()で設定する

追加したい位置を確認し、まずは末尾ならappend()、先頭ならprepend()という形で試すと迷いにくくなります。