jQueryで要素を追加するappendの使用方法まとめ ～appendToやafterに適したパターンについても解説
この記事では、HTML内に要素を追加するjQueryのappendメソッドについて解説していきます。
Webページを作成していると、特定のイベント発生時に要素を追加したい場合が多くあります。例えばクリック時にテーブルの列を追加したり、ユーザの選択によってリストの選択肢を増やす場合などですね。
appendメソッドが使いこなせると、そのような追加処理をスマートに書けるようになります。
目次
１．append()の基本的な使い方
append()メソッドは、指定した要素内の最後に引数のコンテンツを追加するメソッドです。
コンテンツにはテキストの他、HTML要素やJQueryオブジェクトが指定できます。
append()の基本的な書き方は以下の通りです。
1 | $(‘対象の要素’).append(‘コンテンツ’) |
サンプルとして、以下のような画面ソースがあると仮定します。
1 2 3 4 5 6 7 8 9 10 11 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>メモ：</p> </div> <button type="button" id="appendTest">追加</button> |
１-１以降では、「追加」ボタンをクリックした時の処理を考えていきます。
1 2 3 4 | $("#appendTest").click(function(){ //このfunctionの中身を考える }); |
１-１．テキストを追加する
追加したいテキストを引数として指定します。
対象の要素内のテキストの最後に、引数で指定したテキストが追加されます。
1 2 3 4 5 | $("#appendTest").click(function(){ //「メモ：」の後に引数のテキストを追加 $('p').append('要素の追加テストです。') }); |
クリック後の画面ソースです。<p>タグの中の文章が変更になっているのがわかります。
1 | <p>メモ：要素の追加テストです。</p> |
１-２．HTML要素を追加する
追加したいHTML要素のタグを引数として指定します。
1 2 3 4 | $("#appendTest").click(function(){ //divの最後にpタグを追加 $('div').append('<p>') }) |
クリック後の画面ソースです。<p>タグが1つ増えているのがわかります。
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>メモ：</p> <p></p> </div> |
リストの中にも追加してみましょう。
1 2 3 4 | $("#appendTest").click(function(){ //リストの最後に項目を追加する $('ul').append('<li>') }); |
項目が一つ追加されました。
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li></li> </ul> <p>メモ：</p> </div> |
１-３．HTMLコンテンツを追加する
追加したい要素をHTMLコンテンツ(タグを含んだ文字列)として指定する書き方です。
1 2 3 4 | $("#appendTest").click(function(){ //div内に追加 $('div').append('<p><strong>要素の追加テストです。</strong></p>') }); |
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>メモ：</p> <p><strong>要素の追加テストです。</strong></p> </div> |
こちらももう一例あげます。
1 2 3 4 | $("#appendTest").click(function(){ //リストに追加 $('ul').append('<li>PHP</li>') }); |
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </ul> <p>メモ：</p> </div> |
１-４．jQueryオブジェクトを追加する
オブジェクト($()で指定された要素)を引数に設定します。
1 2 3 | $("#appendTest").click(function(){ $('ul').append($('<li>')); }); |
クリック後の画面ソースです。リストの中身が追加されました。
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li></li> </ul> <p>メモ：</p> </div> |
１-５．変数を使用する
引数には変数も設定することができます。
複数のタグがあるHTMLコンテンツなどは可読性やパフォーマンスのために一度変数に入れておく方法がおすすめです。
サンプルでは、変数add_contentsにHTMLコンテンツを代入します。
1 2 3 4 5 6 7 | $("#appendTest").click(function(){ //HTMLコンテンツの作成 var add_contents = '<li>PHP</li>' add_contents += '<li><strong>Ruby</strong></li>' //追加 $('ul').append(add_contents); }); |
変数に入れたHTMLコンテンツが追加されました。
1 2 3 4 5 6 7 8 9 10 11 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> <li><strong>Ruby</strong></li> </ul> <p>メモ：</p> </div> |
１-６．複数の要素やコンテンツを追加する
追加する要素やコンテンツが複数ある場合、引数を2つ以上設定することでも実現できます。
カンマで区切って3つの項目を追加します。
1 2 3 | $("#appendTest").click(function(){ $('ul').append('<li>PHP</li>', '<li>Ruby</li>', '<li>Python</li>'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> <li>Ruby</li> <li>Python</li> </ul> <p>メモ：</p> </div> |
２．類似メソッドappendTo()が適しているパターンは？追加した要素をさらに変更する
jQueryには要素内の最後に要素やコンテンツを追加するメソッドとして「appendTo」が用意されています。
メソッドの対象と引数がappendとappendToでは逆になることに注意してください。
append()メソッドは追加する内容を引数にします。
1 | $('ul').append('<li>PHP</li>') |
appendTo()メソッドは追加される対象を引数にします。
1 | $('<li>PHP</li>').appendTo('ul') |
この2つのメソッドの違いは戻り値です。
appendは「追加された対象」を、appendToは「追加した要素やコンテンツ」を返します。
要素の追加後にさらに処理を行う場合はこの戻り値が重要になってきます。
1 2 3 4 | $("#appendTest").click(function(){ //appendの場合、「ul」全体の色が変更される $('ul').append('<li>CSS</li>').css('background-color','yellow') }); |
1 2 3 4 | $("#appendTest").click(function(){ //appendToの場合、追加した最後の「li」のみ色が変更される $('<li>CSS</li>').appendTo('ul').css('background-color','yellow') }); |
要素の追加後に何をしたいかによって、使い分けられるとベストです。
３．appendではできないこととは？prependやafterの使い方も紹介
引き続きこちらのサンプルを使います。
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>メモ：</p> </div> |
便利なappendメソッドですが、以下のような処理はできません。
３-１．要素内の先頭に追加する
例えばリストの一番上に項目を追加したい場合ですね。このようなパターンではprepend()を使います。
1 2 3 | $("#appendTest").click(function(){ $('ul').prepend('<li>TOP</li>') }); |
クリック後の画面ソースです。リストの一番上に「TOP」が追加されました。
1 2 3 4 5 6 7 8 9 10 11 | <div> <ul> <li>TOP</li> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>メモ：</p> </div> |
３-２．要素の直後に追加する
例えばリストの直後にもう一つ<p>タグを追加したい場合ですね。
append()を使用すると<p>メモ：</p>の次に追加されてしまうので、このようなパターンではafter()を使います。
1 2 3 | $("#appendTest").click(function(){ $('ul').after('<p>要素の追加テストです。</p>') }); |
リストの直後に<p>タグが追加されました。
1 2 3 4 5 6 7 8 9 10 | <div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>要素の追加テストです。</p> <p>メモ：</p> </div> |
以上、appendの基本的な使い方と類似メソッドの違いをまとめました。
引数や類似メソッドの使用に迷った時は、変更後のHTMLをイメージするとスムーズに書けると思います。
コメント