【jQuery】prependTo()で各要素の先頭に追加する!

各要素の先頭に要素を追加するにはjQueryのprependTo()メソッドを使用します。

jQueryのprependTo()メソッドとは各要素内の一番前に指定した要素を追加するメソッドであり、リストなどの複数に並べられている要素内の先頭に要素を追加することができます。

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

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

⚫︎ 各要素の先頭に要素を追加する方法

⚫︎ prependTo()で既にある要素を各要素の先頭に追加する方法

⚫︎ prepend()とprependTo()の違い

ハルトさん

今回はjQueryのprependTo()で各要素の先頭に要素を追加する方法について説明していきます。

さとみさん

お願いします!

prependTo()とは

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

prependTo()の書き方

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

パラメータ

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

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

各要素の先頭に要素を追加するサンプルコード

各要素の先頭に要素を追加するサンプルコードを紹介します。
各要素の先頭に単数の要素を追加するには、prependTo()のパラメータにセレクタを指定します。

sample.html

style.css

index.js

出力結果

prependTo()のパラメータにセレクタを指定することで、指定した要素の先頭に要素を追加することができます。
その為、ボタンを押すとlists1クラス、lists2クラスの先頭に要素が追加されています。

prependTo()で既にある要素を各要素の先頭に追加する方法

prependTo()で既にある要素を各要素の先頭に追加することができます。

sample.html

style.css

index.js

出力結果

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

さとみさん

prependTo()を使用して既にある要素を各要素の先頭に持っていっていますね!

ハルトさん

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

prepend()とprependTo()の違い

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

違い pretend() pretendTo()
パラメータに関数を指定できるかどうか 指定できる 指定できない
複数の要素を先頭に追加できるかどうか 追加できる 追加できない
文字列を指定できるかどうか 指定できる 指定できない

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

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

さとみさん

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

ハルトさん

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

さとみさん

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

ハルトさん

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

さとみさん

そうなんですね!
でも、pretendTo()のパラメータには「,(カンマ)」をつけて区切って指定することはできますよね?

ハルトさん

それは可能です。
しかし、prepend()と違ってセレクタを複数指定することになるので追加する要素を複数指定するのではなく、追加される対象の要素を複数指定することになります。

さとみさん

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

今回のポイント

prependTo()で各要素の先頭に要素を追加

⚫︎ 各要素の先頭に要素を追加するにはjQueryのprependTo()を使用する

⚫︎ prependTo()のパラメータには追加されるセレクタを指定する

⚫︎ prependTo()で既にある要素を各要素の先頭に持っていくことができる

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

関連記事

jQueryのbefore()で要素の前に新しい要素を挿入する方法についてはこちらをご参考ください。

jQueryのafter()で要素の前に新しい要素を挿入する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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