【jQuery】before()を使って要素の前に新しい要素を挿入する!

要素の前に新しい要素を挿入するにはjQueryのbefore()を使用します。

jQueryのbefore()とはHTMLの各要素の前にコンテンツ(要素など)を挿入するメソッドであり、既にある要素の前に文字列や要素、jQueryオブジェクトを挿入することができます。

また、before()のパラメータに関数を使用することで、条件など何かしらの処理をした前に要素の前に新しいコンテンツを挿入することもできたり、要素を先頭に持ってくるなど、既にある要素の順序を入れ替えたりすることもできます。

その為、after()とは反対のメソッドとなります。

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

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

⚫︎ before()で既にある要素の順序を入れ替える方法

ハルトさん

今回はjQueryのbefore()で要素の前に新しい要素を挿入する方法について説明していきます。

さとみさん

お願いします!

before()とは

before()とは、HTMLの各要素の前にコンテンツを挿入するメソッドとなります。

before()の書き方

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

パラメータ

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

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

要素の前に新しい要素を挿入するサンプルコード

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

要素の前に単数の新しい要素を挿入する場合

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

sample.html

style.css

index.js

出力結果

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

要素の前に複数の新しい要素を挿入する場合

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

sample.html

style.css

index.js

出力結果

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

条件などを指定して要素の前に新しい要素を挿入する場合

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

sample.html

style.css

index.js

出力結果

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

さとみさん

before()に関数を指定してを呼び出すことで、条件などを指定して要素の前に新しい要素を挿入できるのですね!

ハルトさん

そうですね。
サンプルコードではif文を使用し、条件を満たさなければ要素の前に新しい要素を挿入できないようにしています。
その為、何かしらの処理によって要素の前に新しい要素を挿入したい場合は関数を使用すると良いですよ。

before()で既にある要素の順序を入れ替える方法

before()で既にある要素の順序を入れ替えることができます。

sample.html

style.css

index.js

出力結果

before()のパラメータに$(セレクタ)を指定するすることで、既にある要素の順番を入れ替えることができます。
その為、ボタンを押すとpタグの要素の一番前への入れ替えが行われます。

さとみさん

before()を使用して既にある要素の順序を入れ替えていますね!

ハルトさん

そうですね。
before()のパラメータに$(セレクタ)を指定することで既にある要素の順番を入れ替えることができますよ。
また、パラメータに$(セレクタ)はタグやクラス名、id名でも構いませんよ。

今回のポイント

before()で要素の前に新しい要素を挿入

⚫︎ 要素の前に新しい要素を挿入するにはjQueryのbefore()を使用する

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

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

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

⚫︎ before()で既にある要素の順序を入れ替えることができる

関連記事

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

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

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

Writer
壷井

壷井

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

最新の案件情報

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