【jQuery】appendTo()で指定した要素の最後に追加する!

指定した要素の最後に要素を追加するにはjQueryのappendTo()メソッドを使用します。

jQueryのappendTo()とは指定した要素内の一番後ろに指定した要素を追加するメソッドであり、ある要素A内の最後に要素Bを追加することができます。

要素の最後に追加するメソッドは他にもappend()メソッドがありますが、指定するパラメータとセレクタが逆になり、様々なケースで異なる部分がありますので注意が必要です。

今回は、jQueryのappendTo()を使って要素の後に新しい要素を追加する方法について以下の内容で解説していきます。

⚫︎ 指定した単数の要素の最後に要素を追加する場合
⚫︎ 指定した複数の要素の最後に要素を追加する場合

⚫︎ appendTo()で既にある要素を指定した要素の最後に追加する方法

⚫︎ append()とappendTo()の違い

ハルトさん

今回はjQueryのappendTo()で指定した要素の最後に要素を追加する方法について説明していきます。

さとみさん

お願いします!

appendTo()とは

appendTo()とは、HTMLの指定した要素の後ろにコンテンツを追加するメソッドとなります。
つまり、ある要素Aの後ろにある要素Bが追加されるようになります。

appendTo()の書き方

appendTo()の書き方は下記となります。

パラメータ

⚫︎ セレクタ:
追加されるセレクタを指定する

appendTo()のパラメータに追セレクタを指定することで、$()で指定した追加した内容をセレクタ内の最後に要素を追加することができます。

指定した要素の最後に要素を追加するサンプルコード

指定した要素の最後に要素を追加するサンプルコードを紹介します。

指定した単数の要素の最後に要素を追加する場合

指定した単数の要素の最後に要素を追加する場合は、appendTo()のパラメータにセレクタを指定します。

sample.html

style.css

index.js

出力結果

appendTo()のパラメータにセレクタを指定することで、指定した要素の最後に要素を追加することができます。
その為、ボタンを押すとlists1クラスにp要素を、lists2クラスに2h要素を、lists3クラスの最後に3h要素が追加されています。

指定した複数の要素の最後に要素を追加する場合

指定した複数の要素の最後に要素を追加する場合は、appendTo()のパラメータにセレクタを「,(カンマ)」で区切って指定します。

sample.html

style.css

index.js

出力結果

appendTo()のパラメータにセレクタを「,(カンマ)」で区切って指定することで、指定した複数の要素の最後に要素を追加することができます。
その為、ボタンを押すとlists1クラス、lists2クラス、lists3クラスの最後にp要素が追加されています。

appendTo()で既にある要素を指定した要素の最後に追加する方法

appendTo()で既にある要素を指定した要素の最後に追加することができます。

sample.html

style.css

index.js

出力結果

appendTo()のパラメータに$(セレクタ)を指定するすることで、既にある要素を指定した要素の後ろに追加することができます。
その為、ボタンを押すとdivタグの要素の最後にpタグの要素が追加されます。

さとみさん

appendTo()を使用して既にある要素が指定した要素の最後に追加されていますね!

ハルトさん

そうですね。
appendTo()のパラメータに$(セレクタ)を指定することでを既にある要素を指定した要素の最後に追加することができます。
また、パラメータに$(セレクタ)はタグやクラス名、id名でも構いません。

append()とappendTo()の違い

append()とappendTo()の違いはパラメータ指定が反対であると言いましたが他にも下記のような違いがあります。

違い append() appendTo()
パラメータに関数を指定できるかどうか 指定できる 指定できない
複数の要素を最後に追加できるかどうか 追加できる 追加できない
文字列を指定できるかどうか 指定できる 指定できない

このようにappend()メソッドではできても、appendTo()メソッドではできないケースがありますので注意してください。

また、jQueryのappend()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

append()とappendTo()の違いってパラメータの指定が反対になっているだけじゃないんですね!

ハルトさん

そうですね。
パラメータの指定が反対になっているのも違いの一つですが、上記の表のように様々な部分で違いがあります。

さとみさん

複数の要素を指定する場合は$()に「,(カンマ)」をつけて区切って指定することはできないんですか?

ハルトさん

指定することはできますけど最初に指定した要素のみが追加の対象となります。
append()の場合はパラメータに追加する要素を指定していたので複数の要素の追加は可能ですが、appendTo()の場合は$()に追加する内容を指定するので複数の要素の追加はできません。

さとみさん

なるほどですね!
append()とappendTo()はパラメータの指定が逆だからと言う認識で使用しない方がいいですね!

今回のポイント

appendTo()で指定した要素の最後に要素を追加

⚫︎ 指定した要素の最後に要素を追加するにはjQueryのappendTo()を使用する

⚫︎ 指定した単数の要素の最後に要素を追加するにはappendTo()のパラメータにセレクタを指定する

⚫︎ 指定した複数の要素の最後に要素を追加するにはappendTo()のパラメータであるセレクタを「,(カンマ)」で区切って指定する

⚫︎ appendTo()で既にある要素を指定した要素の最後に追加することができる

⚫︎ append()とappendTo()はパラメータが逆だけで同じメソッドのように思えるが複数の要素を追加できないなど、様々なケースで異なる部分がある

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し