こんにちは、ライターのマサトです！
今回は、jQueryで対象の子要素にテキストやHTML要素を追加できる「append()」について学習していきましょう！
この記事では、
・「append()」とは？
・基本的な使い方
・複数のHTML要素の追加
・「remove()」による要素の削除
という基本的な内容から、
・「html()」との違いについて
・「append()」によく似たメソッド
などの応用的な使い方に関しても解説していきます。
この記事で、をしっかり学習して自分のスキルアップを目指しましょう！
「append()」とは？
それでは、まず最初に「append()」メソッドについて基本的な知識から学習を進めていきましょう！
「append()」は、指定した子要素の最後にテキスト文字やHTML要素を追加することができるメソッドになります。
例えば、次のようなHTMLがあると想定してください。
<ul>
<li>項目１</li>
<li>項目２</li>
</ul>
この例ではリスト要素が配置されていますが、ここに「項目３」を追加したいような場合に「append()」は便利です。
「append()」を活用すると、例えばボタンをクリックした際にWebコンテンツを生成して表示するような動作も可能です。
本記事では、「append()」の基本から類似メソッドの使い分けなどを体系的に学べますのでぜひ参考にしてみてください！
基本的な使い方
ここからは、「append()」を使って実際にプログラミングをしていきましょう！
「append()」の記述方法は、【 対象要素.append( 追加したい要素 ) 】のように引数へ追加したいテキストや要素を指定します。
次のサンプル例を見てください！
<body>
<p>こんにちは！</p>
<script>
$('p').append('太郎さん。');
</script>
</body>
実行結果
<p>こんにちは！太郎さん。</p>
この例では、p要素が配置されており「append()」でテキスト文字を追加しているのが分かります。
p要素に対して「append(‘太郎さん。’)」と記述することで、対象要素内の末尾にテキストが追加されるわけです。
また、テキストではなくHTML要素を追加することも可能です。
<body>
<ul>
<li>項目１</li>
<li>項目２</li>
</ul>
<script>
$('ul').append('<li>項目３</li>');
</script>
</body>
この例では、冒頭で掲示したリスト要素が配置されていますね。
このリスト要素に「append(‘<li>項目３</li>’)」と記述することで、「項目３」という3つ目の「li要素」を追加しています。
対象要素を「$(‘ul’)」と記述することで、ul要素内の末尾に新しい要素が追加されるという点を覚えておきましょう！
複数のHTML要素の追加
「append()」で追加できる要素は1つとは限らず、複数の要素を一度に追加することも可能なのでご紹介しておきます。
例えば、div要素を複数追加する例を見てみましょう！
<body>
<div>サンプルテキスト</div>
<script>
$('div').append('<div id="one">', '<div id="two">');
</script>
</body>
実行後のHTML
<div>
"サンプルテキスト"
<div id="one"></div>
<div id="two"></div>
</div>
この例では、単純なdiv要素だけが最初に配置されているのが分かります。
このdiv要素を対象に、「append(‘<div id="one">’, ‘<div id="two">’)」と記述することで2つのdiv要素を追加しています。
つまり、append()の引数にカンマ区切りでHTML要素を記述することで、複数の要素を一度に追加できるわけですね。
実際に生成されたHTMLは上記のようなカタチになり、jQueryからDOM操作が出来ていることが分かります。
「remove()」による要素の削除
次に、「append()」で追加した要素を削除する方法について見ていきましょう！
「append()」に要素を削除するための機能はないので、jQueryの標準で用意されている「remove()」を使いましょう。
「remove()」は要素を削除するメソッドとして一般的によく使われています。
次のサンプル例を見てください！
<body>
<ul>
<li>おはよう</li>
</ul>
<script>
$('ul').append('<li class="text">こんにちは</li>');
$('.text').remove();
</script>
</body>
この例では、簡単なリスト要素が配置されています。
このリスト要素を対象にして、「append(‘<li class="text">こんにちは</li>’)」のように記述することでli要素を追加していますね。
ポイントは属性を付与している点で、この属性を使って「remove()」を実行することで追加した要素を削除しています。
間違いやすい点としては、「append( 追加した要素 ).remove()」のように続けてremove()を実行してしまうパターンです。
「remove()」は要素を丸ごと削除するため、append()を実行した対象要素自体が削除されてしまうので注意しましょう！
「html()」との違いについて
jQueryには「append()」のように指定要素を生成して配置できる類似メソッドがいくつかあります。
そのなかで特に間違いやすいメソッドとして「html()」があります。
そこで、「append()」「html()」の違いについて解説しておきます！
次のサンプル例を見てください！
<body>
<ul>
<li>項目１</li>
</ul>
<script>
$('ul').append('<li>項目２</li>');
</script>
</body>
実行後のHTML
<ul>
<li>項目１</li>
<li>項目２</li>
</ul>
この例では「リスト要素」が配置されており、「append()」でli要素を追加していますね。
この場合は、これまで学んできた通りul要素内の末尾に追加されているのが分かります。
それでは、同じことを「html()」を使ってやってみましょう！
<body>
<ul>
<li>項目１</li>
</ul>
<script>
$('ul').html('<li>項目２</li>');
</script>
</body>
実行後のHTML
<ul>
<li>項目２</li>
</ul>
注目すべきは「実行後のHTML」の状態です。
元々あった「項目１」というリスト要素が削除されているのが分かりますね。
実は、「html()」を使うと引数に指定した要素に上書きされてしまうという特徴があるのです！
今回の場合であれば、「html(‘<li>項目２</li>’)」という記述によりul要素内が「項目２」というli要素に上書きされたわけです。
つまり、「append()」が末尾に追加するメソッドなのに対して、「html()」は要素内に上書きするメソッドということです！
「append()」によく似たメソッド
これまで「append()」メソッドについての基本的な活用法を学習してきました。
jQueryには任意の要素を追加する方法として、他にも類似メソッドがあるのでそれぞれの使い方をまとめて解説致します。
主に、「append()」に加えて「prepend() / after() / before()」という全部で4つのメソッドを使い分けるのが一般的です。
それぞれ細かい違いがあるので、詳しく見ていきましょう！
「prepend()」について
まずは、「prepend()」メソッドの使い方から見ていきましょう！
「prepend()」は、「append()」と逆の性質があり対象要素内の先頭に要素を追加することができます。
次のサンプル例を見てください！
<body>
<ul>
<li>項目１</li>
</ul>
<script>
$('ul').prepend('<li>項目２</li>');
</script>
</body>
実行後のHTML
<ul>
<li>項目２</li>
<li>項目１</li>
</ul>
この例では、リスト要素内に「prepend()」を使って新しいli要素を追加しています。
「prepend(‘<li>項目２</li>’)」と記述することで、対象のul要素内の先頭にli要素を追加することができます。
「append()」がul要素内の末尾に追加するのに対して、「prepend()」は先頭に追加している点に注目しましょう。
この「append() / prepend()」はお互いによく使うケースがあるので、ペアで覚えておくと良いでしょう！
「after()」について
次に、「after()」メソッドについて見ていきましょう！
これまで学んできた「append() / prepend()」は、対象とする要素内への追加ができるメソッドでした。
しかし「after()」の場合は、対象とする「要素外」への追加ができるメソッドということになります。
例えば、次のサンプル例を見てみましょう！
<body>
<ul>
<li>項目１</li>
</ul>
<script>
$('ul').after('<p>項目２</p>');
</script>
</body>
実行後のHTML
<ul>
<li>項目１</li>
</ul>
<p>項目２</p>
この例では、これまで通り対象となる「ul要素」に新しい要素を追加しています。
この「ul要素」に対して、「after(‘<p>項目２</p>’)」と記述することでul要素外にp要素を追加するわけです。
実行後のHTMLを見るとよく分かりますが、ul要素の次に「p要素」が配置されていますよね。
「after()」についてさらに詳しい解説・注意ポイントなどを含めて、次の記事でも詳しく解説しているのでぜひ参考にしてみてください！
「before()」について
最後に、「before()」メソッドについてもご紹介しておきます！
「before()」は「after()」と逆の性質があり、対象の要素外の先頭に任意のHTML要素を追加することができるメソッドです。
次のサンプル例を見てください！
<body>
<ul>
<li>項目１</li>
</ul>
<script>
$('ul').before('<p>項目２</p>');
</script>
</body>
実行後のHTML
<p>項目２</p>
<ul>
<li>項目１</li>
</ul>
対象となる「ul要素」に対して、「before(‘<p>項目２</p>’)」と記述することでul要素外に追加していますね。
実行後のHTMLの状態を見ると分かりますが、ul要素の前にしっかりと配置されている点に注目してください。
「after()」がul要素の次に配置されていたのに対して、「before()」はその前に配置されています。
「after() / before()」もペアでよく使われるので、合わせて覚えておくようにしておきましょう！
まとめ
今回は、jQueryで指定した子要素の末尾に新しい要素を追加できる「append()」について学習しました。
最後に、もう一度おさらいをしておきましょう！
・「append()」は対象要素内の末尾にHTML要素やテキストを追加できる
・「append()」で追加した要素は「remove()」で削除しよう
・「html()」が上書きするのに対して、「append()」は末尾に追加する
・類似メソッドとして「prepend() / after() / before()」がある
上記内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れて学習を進めるように頑張りましょう！
