【jQuery】これで解決!指定した要素を追加する方法の一覧!

指定した要素を追加するにはappend()メソッドやappendTo()メソッド、prepend()メソッドやprependTo()メソッドなど様々な方法がありますが追加する場所や指定方法によって使用するメソッドが異なります。

また、wrap()メソッドのように指定した要素を囲んで要素を追加する方法もありますので、要素を追加した後のソースコードを確認し、どのようなコードになれば良いのかを考えながらメソッドを使い分けていきましょう。

その為、今回はjQueryで指定した要素を追加する方法の一覧について以下の内容で紹介していきます。

要素を追加するために使用するメソッドは何があったかを調べる際にこちらの記事を参考にしてみてください。

⚫︎ 指定した要素の後ろに追加する方法の一覧

⚫︎ 指定した要素の前に追加する方法の一覧

⚫︎ 指定した要素で囲んで追加する方法の一覧

指定した要素の後ろに追加する方法の一覧

jQueryで指定した要素の後ろに追加する方法の一覧を紹介します。

append()で要素を追加する場合

append()で要素の追加を行ってみます。

sample.html

index.js

実行結果

append()で指定した要素の後ろに要素の追加を行っています。

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

appendTo()で要素を追加する場合

appendTo()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

appendTo()で指定した要素の後ろに要素の追加を行っています。

appendTo()メソッドはappend()メソッドと比べて、セレクタとパラメータの指定が反対になります。

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

after()で要素を追加する場合

after()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

after()メソッドで指定した要素の後ろに要素の追加を行っています。

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

insertAfter()で要素を追加する場合

insertAfter()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

insertAfter()メソッドで指定した要素の後ろに要素を追加しています。

insertAfter()メソッドはafter()メソッドと比べて、セレクタとパラメータの指定が反対になります。

指定した要素の前に追加する方法の一覧

jQueryで指定した要素の前に追加する方法の一覧を紹介します。

prepend()で要素を追加する場合

prepend()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

prepend()メソッドで指定した要素の前に要素の追加を行っています。

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

prependTo()で要素を追加する場合

prependTo()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

prependTo()メソッドで指定した要素の前に要素の追加を行っています。

prependTo()メソッドはprepend()メソッドと比べて、セレクタとパラメータの指定が反対になります。

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

before()で要素を追加する場合

before()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

before()メソッドで指定した要素の前に要素の追加を行っています。

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

insertBefore()で要素を追加する場合

insertBefore()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

insertBefore()メソッドで指定した要素の前に要素を追加しています。

insertBefore()メソッドはbefore()メソッドと比べて、セレクタとパラメータの指定が反対になります。

指定した要素で囲んで追加する方法の一覧

wrap()で要素を追加する場合

wrap()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

wrap()メソッドで指定した要素を囲んで要素の追加を行っています。

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

wrapInner()で要素を追加する場合

wrapInner()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

wrapInner()メソッドで指定した要素で囲んで要素の追加を行っています。

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

wrapAll()で要素を追加する場合

wrapAll()メソッドで要素の追加を行ってみます。

sample.html

index.js

実行結果

wrapAll()メソッドで指定した要素でまとめて囲んで要素の追加を行っています。

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

今回のポイント

指定した要素で追加するには複数のメソッドがある

⚫︎ 指定した要素の後ろに追加するにはappend()メソッドappendTo()メソッドafter()メソッドinsertAfter()メソッドを使用する

⚫︎ 指定した要素の前に追加するには、prepend()メソッドprependTo()メソッドbefore()メソッドinsertBefore()メソッドを使用する

⚫︎ 指定した要素で囲んで追加するには、wrap()メソッドwrapInner()メソッドwrapAll()メソッドを使用する

Writer
壷井

壷井

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

最新の案件情報

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