jQueryの使い方を徹底解説!

jQueryで要素を追加するappendの使用方法まとめ ~appendToやafterに適したパターンについても解説

ENGINEER.CLUB編集部

この記事では、HTML内に要素を追加するjQueryappendメソッドについて解説していきます。

Webページを作成していると、特定のイベント発生時に要素を追加したい場合が多くあります。例えばクリック時にテーブルの列を追加したり、ユーザの選択によってリストの選択肢を増やす場合などですね。

appendメソッドが使いこなせると、そのような追加処理をスマートに書けるようになります。


1.append()の基本的な使い方

append()メソッドは、指定した要素内の最後に引数のコンテンツを追加するメソッドです。

コンテンツにはテキストの他、HTML要素やJQueryオブジェクトが指定できます。

append()の基本的な書き方は以下の通りです。

$(‘対象の要素’).append(‘コンテンツ’)

サンプルとして、以下のような画面ソースがあると仮定します。

<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
    </ul>

	<p>メモ:</p>
</div>
        
<button type="button" id="appendTest">追加</button>

1-1以降では、「追加」ボタンをクリックした時の処理を考えていきます。

$("#appendTest").click(function(){

    //このfunctionの中身を考える
});

1-1.テキストを追加する

追加したいテキストを引数として指定します。

対象の要素内のテキストの最後に、引数で指定したテキストが追加されます。

$("#appendTest").click(function(){

    //「メモ:」の後に引数のテキストを追加
    $('p').append('要素の追加テストです。')
});

クリック後の画面ソースです。<p>タグの中の文章が変更になっているのがわかります。

<p>メモ:要素の追加テストです。</p>

1-2.HTML要素を追加する

追加したいHTML要素のタグを引数として指定します。

$("#appendTest").click(function(){
	//divの最後にpタグを追加
    $('div').append('<p>')
})

クリック後の画面ソースです。<p>タグが1つ増えているのがわかります。

<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
    </ul>

	<p>メモ:</p>
	<p></p>
</div>

リストの中にも追加してみましょう。

$("#appendTest").click(function(){
	//リストの最後に項目を追加する
    $('ul').append('<li>')
});

項目が一つ追加されました。

<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li></li>
    </ul>

	<p>メモ:</p>
</div>

1-3.HTMLコンテンツを追加する

追加したい要素をHTMLコンテンツ(タグを含んだ文字列)として指定する書き方です。

$("#appendTest").click(function(){
  //div内に追加
    $('div').append('<p><strong>要素の追加テストです。</strong></p>')
});
<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
    </ul>

	<p>メモ:</p>
	<p><strong>要素の追加テストです。</strong></p>
</div>

こちらももう一例あげます。

$("#appendTest").click(function(){
  //リストに追加
    $('ul').append('<li>PHP</li>')
});
<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li>PHP</li>
    </ul>

	<p>メモ:</p>
</div>

1-4.jQueryオブジェクトを追加する

オブジェクト($()で指定された要素)を引数に設定します。

$("#appendTest").click(function(){
	$('ul').append($('<li>'));
});

クリック後の画面ソースです。リストの中身が追加されました。

<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li></li>
    </ul>

	<p>メモ:</p>
</div>

1-5.変数を使用する

引数には変数も設定することができます。

複数のタグがあるHTMLコンテンツなどは可読性やパフォーマンスのために一度変数に入れておく方法がおすすめです。

サンプルでは、変数add_contentsHTMLコンテンツを代入します。

$("#appendTest").click(function(){
	//HTMLコンテンツの作成
	var add_contents = '<li>PHP</li>'
       add_contents += '<li><strong>Ruby</strong></li>'
	//追加
	$('ul').append(add_contents);
});

変数に入れたHTMLコンテンツが追加されました。

<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li>PHP</li>
         <li><strong>Ruby</strong></li>
    </ul>

	<p>メモ:</p>
</div>

1-6.複数の要素やコンテンツを追加する

追加する要素やコンテンツが複数ある場合、引数を2つ以上設定することでも実現できます。

カンマで区切って3つの項目を追加します。

$("#appendTest").click(function(){
	$('ul').append('<li>PHP</li>', '<li>Ruby</li>', '<li>Python</li>');
});
<div>
    <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
         <li>PHP</li>
         <li>Ruby</li>
         <li>Python</li>
    </ul>

	<p>メモ:</p>
</div>

2.類似メソッドappendTo()が適しているパターンは?追加した要素をさらに変更する

jQueryには要素内の最後に要素やコンテンツを追加するメソッドとして「appendTo」が用意されています。

メソッドの対象と引数がappendappendToでは逆になることに注意してください。

append()メソッドは追加する内容を引数にします。

$('ul').append('<li>PHP</li>')

appendTo()メソッドは追加される対象を引数にします。

$('<li>PHP</li>').appendTo('ul')

この2つのメソッドの違いは戻り値です。

appendは「追加された対象」を、appendToは「追加した要素やコンテンツ」を返します。

要素の追加後にさらに処理を行う場合はこの戻り値が重要になってきます。

$("#appendTest").click(function(){
	//appendの場合、「ul」全体の色が変更される
	$('ul').append('<li>CSS</li>').css('background-color','yellow')
});
$("#appendTest").click(function(){
	//appendToの場合、追加した最後の「li」のみ色が変更される
    $('<li>CSS</li>').appendTo('ul').css('background-color','yellow')
});

要素の追加後に何をしたいかによって、使い分けられるとベストです。


3.appendではできないこととは?prependafterの使い方も紹介

引き続きこちらのサンプルを使います。

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <p>メモ:</p>
        
</div>

 便利なappendメソッドですが、以下のような処理はできません。

3-1.要素内の先頭に追加する

例えばリストの一番上に項目を追加したい場合ですね。このようなパターンではprepend()を使います。

$("#appendTest").click(function(){
	$('ul').prepend('<li>TOP</li>')
});

クリック後の画面ソースです。リストの一番上に「TOP」が追加されました。

<div>
    <ul>
       	<li>TOP</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <p>メモ:</p>
        
</div>

3-2.要素の直後に追加する

例えばリストの直後にもう一つ<p>タグを追加したい場合ですね。

append()を使用すると<p>メモ:</p>の次に追加されてしまうので、このようなパターンではafter()を使います。

$("#appendTest").click(function(){
	$('ul').after('<p>要素の追加テストです。</p>')
});

リストの直後に<p>タグが追加されました。

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <p>要素の追加テストです。</p>
    <p>メモ:</p>
        
</div>

以上、appendの基本的な使い方と類似メソッドの違いをまとめました。

引数や類似メソッドの使用に迷った時は、変更後のHTMLをイメージするとスムーズに書けると思います。

私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。もし、今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。

『技術力』と『人間力』を高め市場価値の高いエンジニアを目指しませんか?

私たちは「技術力」だけでなく「人間力」の向上をもって遙かに高い水準の成果を出し、関わる全ての人々に感動を与え続ける集団でありたいと考えています。

高い水準で仕事を進めていただくためにも、弊社では次のような環境を用意しています。

  • 定年までIT業界で働くためのスキル(技術力、人間力)が身につく支援
  • 「給与が上がらない」を解消する6ヶ月に1度の明確な人事評価制度
  • 平均残業時間17時間!毎週の稼動確認を徹底しているから実現できる働きやすい環境

現在、株式会社ボールドでは「キャリア採用」のエントリーを受付中です。

まずは以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。

コメント

文系IT未経験歓迎!株式会社ボールドの 採用エントリー を受付中!
文系IT未経験歓迎!
株式会社ボールドの 採用エントリー を受付中!