【jQuery】prepend()を使って各要素の先頭に要素を挿入する!

各要素の先頭に要素を挿入するにはjQueryのprepend()を使用します。

jQueryのprepend()とは各要素内の一番前に指定したHTMLやエレメントを挿入するメソッドであり、リストなどの複数に並べられている要素内の先頭に文字列や要素、jQueryオブジェクトを挿入することができます。

また、prepend()のパラメータに関数を使用することで、条件など何かしらの処理をした後に各要素内の一番前にを挿入することができます。

先頭にprepend()のパラメータに関数を使用することで、条件など何かしらの処理をした後に各要素内の一番前にを挿入することができます。

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

⚫︎ 要各要素の先頭に単数の要素を挿入する場合
⚫︎ 要各要素の先頭に複数の要素を挿入する場合
⚫︎ 条件などを指定して各要素の先頭に要素を挿入する場合

⚫︎ prepend()で既にある要素を各要素の先頭に挿入する方法

ハルトさん

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

さとみさん

お願いします!

prepend()とは

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

prepend()の書き方

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

パラメータ

⚫︎ 追加する内容:
指定したセレクタの後ろに追加したい内容を指定する
(文字列や要素、jQueryオブジェクトを指定する)
⚫︎ 関数:
指定したセレクタの先頭に挿入したい文字列や要素、jQueryオブジェクトを返す関数を指定する

prepend()のパラメータに追加する内容を指定することで、追加した内容をセレクタ内の先頭に要素を挿入することができます。
また、パラメータに関数を指定することで、条件など何かしらの処理を行った後にセレクタ内の先頭に要素を挿入することができます。

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

要素の後に新しい要素を挿入するサンプルコードを紹介します。

各要素の先頭に単数の要素を挿入する場合

要素の後に単数の新しい要素を挿入する場合は、prepend()のパラメータに追加する要素を指定します。

sample.html

style.css

index.js

出力結果

prepend()のパラメータに追加したい要素を指定することで、要素の後に単数の新しい要素を挿入することができます。
その為、ボタンを押すと単数の要素が挿入されています。

各要素の先頭に複数の要素を挿入する場合

要素の後に複数の新しい要素を挿入する場合はprepend()のパラメータに追加する要素を「,(カンマ)」で区切って配列で指定します。

sample.html

index.js

index.js

出力結果

prepend()のパラメータに追加したい要素をカンマで区切って指定することで、要素の後に複数の新しい要素を挿入することができます。
その為、ボタンを押すと複数の要素が要素が挿入されています。

条件などを指定して各要素の先頭に要素を挿入する場合

条件などを指定して要素の後に新しい要素を挿入する場合はprepend()のパラメータに関数を指定します。

sample.html

style.css

index.js

出力結果

prepend()のパラメータに関数を指定することで、条件などを指定して要素の後に新しい要素を挿入することができます。
その為、btn1クラス、btn2クラス、btn3クラスのボタンの順に押さないと要素が挿入されないようになっています。

prepend()で既にある要素を各要素の先頭に挿入する方法

prepend()で既にある要素を各要素の先頭に挿入することができます。

sample.html

index.js

出力結果

prepend()のパラメータに$(セレクタ)を指定するすることで、既にある要素の順番を入れ替えることができます。
その為、ボタンを押すとpタグの要素がdivタグの要素の先頭に挿入されます。

さとみさん

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

ハルトさん

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

今回のポイント

prepend()で各要素の先頭に要素を挿入

⚫︎ 各要素の先頭に要素を挿入するにはjQueryのprepend()を使用する

⚫︎ prepend()で各要素の先頭に単数の新しい要素を挿入するにはパラメータに追加したい要素を指定する

⚫︎ prepend()で各要素の先頭に複数の新しい要素を挿入するにはパラメータに追加したい要素をカンマで区切って指定する

⚫︎ 条件などを指定して各要素の先頭に新しい要素を挿入する場合はprepend()のパラメータに関数を指定する

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

関連記事

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

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

jQueryのprependTo()で各要素の先頭に追加する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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