jQueryの命令「prepend()」、「before()」、「prependTo()」。
どう違うのか説明できますか？
本記事では、
ややこしい混同しがちなjQueryのメソッド
「prepend()」「before()」「prependTo()」について、
サンプルデモ付きでスッキリわかりやすく解説しています。
初心者や入門者の方はもちろん、忘れてしまった時の確認用の備忘録としてご活用ください。
目次
それぞれのメソッドの説明
| prepend(挿入するhtmlなど) | 要素の先頭にhtmlなどを挿入する。 |
| before(挿入するhtmlなど) | 要素の前にhtmlなどを挿入する。 |
| prependTo(移動先の場所) | 他の要素内の先頭に指定の要素を挿入する。 |
各命令の違いは上記の通りです。
…文字の説明だけでその違いがピンときますか？？
僕は日々様々なテキストや情報を元に勉強していますが、正直文字だけの説明って本当に苦手です。。
百聞は一見にしかず。
同じ様なところでモヤモヤしている方へ向けて（そして自分のがスッキリ理解する為にも）サンプルとデモを実際に作ってみました！
jQueryで指定の要素を挿入したり、移動したりする命令は沢山ありますが、ここでは上記3つをピックアップしてその違いを説明していきます。
jQueryの命令の一覧を確認したい方は、下記記事に命令一覧の記載しています。参考にしてみてください。
jQueryの命令「prepend(…)」のテスト
コードサンプル
実行用サンプル
See the Pen
jquery_prepend_sample by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
実行用のサンプルは、コードサンプルを元にボタンを押すとスクリプトが実行される様にカスタマイズしています。
ボタンをクリックしてみると、id=”test”が設定されたpタグの「内側」に、strongタグで囲まれた要素が「追加」されます。
実行用サンプル２
See the Pen
jquery_prepend_sample2 by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
html、テキストなどを挿入できちゃいます。
jQueryの命令「before(…)」のテスト
コードサンプル
実行用サンプル
See the Pen
jquery_before_sample by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
実行用のサンプルは、コードサンプルを元にボタンを押すとスクリプトが実行される様にカスタマイズしています。
jQueryの「prepend(…)」は指定した要素の内側に要素が追加されました。
それに対してjQueryの「before(…)」は、要素の外側に要素が追加されます。
ボタンをクリックしてみると、id=”test”が設定されたpタグの「外側」に、新たにpタグで囲まれた要素が「追加」されます。
jQueryの命令「prependTo(…)」のテスト
コードサンプル
実行用サンプル
See the Pen
jquery_prependTo_sample by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
実行用のサンプルは、コードサンプルを元にボタンを押すとスクリプトが実行される様にカスタマイズしています。
jQueryの命令「prependTo(…)」はカッコ内で指定した要素の中に$(…)のカッコ内の要素を移動します。
ややこしい混同し易いポイントとして、
「prepend」は、$(…)のカッコ内の要素にprepend(…)のカッコ内を挿入します。
「prependTo」は、prependTo(…)のカッコ内の要素に$(…)のカッコ内の要素を移動します。
移動先と移動元の考えが逆なので注意が必要です。
ボタンをクリックしてみると、pタグの「内側」に、strongタグで囲まれた要素が「移動」します。
まとめ
一度一通り試してみて分かった気になるけど、しばらくするとモヤモヤしてくるjQueryの命令「prepend()」、「before()」、「prependTo()」。
ややこしくて混同しやすいですが、この記事をご覧いただきスッキリしていただけたら幸いです。
ぜひ確認、勉強用にご活用ください。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
