jQueryの使い方を徹底解説!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1-5.変数を使用する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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