JavaScript
append
jQuery

jQueryで子要素を追加するためのメソッド(append)を解説

2021/06/06

( 更新日：2022/04/20 )

jQueryはHTMLを動的なサイトにするために幅広く利用されています。jQueryはDOM操作を得意としたJavaScriptのライブラリです。jQueryを使えば、HTMLの要素を追加することで、テキストや画像を追加できます。

HTMLの要素を追加するためのメソッドとしてappend()があります。要素の追加はWeb制作においてよく用いられるため、重要なメソッドの1つです。

本記事ではjQueryを用いて子要素を追加するためのメソッドであるappend()について解説します。また、append()の他にも要素を追加するためのメソッドや追加した要素を削除する方法についても解説いたします。

append()は要素を追加するメソッド

HTMLに要素を追加するためにはappend()というメソッドが使用されます。例えば、送信ボタンを押した後、確認の文字を表示するときに使えます。静的なページでは確認用のHTMLファイルを用意してリンクする必要があります。jQueryはappend()を使った数行のコードで実装可能です。

シンプルなコードなため、初心者でも簡単に実装できます。

append()の使い方

基本構文

append()の基本構文は以下の通りです。

$('セレクタ').append('追加したい要素');

appendはセレクタの子要素として追加されます。追加したい要素はHTMLのコードを記述します。例えば、リストを追加したい場合は以下のようなコードとなります。

$('ul').append('<li>リスト</li>');

要素が追加される場所

要素が追加される場所は指定したセレクタの子要素です。もし、リストのようにすでに親要素がいくつかの子要素を持っていた時、append()で追加された要素は子要素の一番後ろに記述されます。例として、下のコードではリスト２の下にリスト３が追加されます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <!---ここにリストが追加される-->
</ul>

<script>
  $('ul').append('<li>リスト3</li>');
</script>

指定するセレクタがすでに子要素を持っている場合は追加される位置に気をつけてください。

要素を追加する他のメソッド

prepend()

prepend()も指定した要素の子要素として追加されるメソッドになります。一見するとappend()と同じです。しかし、追加される場所が異なります。append()は指定した要素の子要素の一番後ろに追加されます。

対して、prepend()は指定した要素の一番最初に追加されます。英単語においてpre-は前にという意味を持つので、子要素の一番前という風に覚えておくといいと思います。

after()

after()は指定した兄弟要素として追加するためのメソッドになります。afterは「～後」という意味を表す英単語です。英単語の通り、指定した要素の後ろの兄弟要素として追加されます。

before()

before()はafter()と同じで、兄弟要素として追加するためのメソッドです。beforeは「～前」という意味を持つので、指定した要素の前の兄弟要素として追加されます。

要素を消す方法

要素を消すためにはremoveメソッドを使います。ここまでは要素を追加する方法について解説しました。しかし、追加した要素やあらかじめ記述されていたコードを消したい場合もあると思います。基本構文は以下の通りです。

$('削除したい要素').remove();

removeメソッドの引数には特に値を指定しなくても削除することが可能です。

サンプルコード

<body>
  <button class="append">リストを後ろに増やす</button>
  <button class="prepend">リストを前に増やす</button>
  <div>
    <ul>
      <li>サンプル</li>
      <li>サンプル</li>
      <li>サンプル</li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $('.append').on('click', function () {
      $('ul').append('<li>サンプルappend</li>');
    });
    $('.prepend').on('click', function () {
      $('ul').prepend('<li>サンプルprepend</li>');
    });
  </script>
</body>