デザイン・プログラミングなど

jQuery – ややこしいprependとbeforeとprependToがスッキリする話【デモサンプル付き】

jQuery - ややこしいprependとbeforeとprependToがスッキリする話【デモサンプル付き】

jQueryの命令「prepend()」、「before()」、「prependTo()」。

どう違うのか説明できますか?

本記事では、

ややこしい混同しがちなjQueryのメソッド
「prepend()」「before()」「prependTo()」について、
サンプルデモ付きでスッキリわかりやすく解説しています。

初心者や入門者の方はもちろん、忘れてしまった時の確認用の備忘録としてご活用ください。

それぞれのメソッドの説明

prepend(挿入するhtmlなど)要素の先頭にhtmlなどを挿入する。
before(挿入するhtmlなど)要素の前にhtmlなどを挿入する。
prependTo(移動先の場所)他の要素内の先頭に指定の要素を挿入する。

各命令の違いは上記の通りです。

…文字の説明だけでその違いがピンときますか??

僕は日々様々なテキストや情報を元に勉強していますが、正直文字だけの説明って本当に苦手です。。

百聞は一見にしかず。

同じ様なところでモヤモヤしている方へ向けて(そして自分のがスッキリ理解する為にも)サンプルとデモを実際に作ってみました!

 

jQueryで指定の要素を挿入したり、移動したりする命令は沢山ありますが、ここでは上記3つをピックアップしてその違いを説明していきます。

jQueryの命令の一覧を確認したい方は、下記記事に命令一覧の記載しています。参考にしてみてください。

jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...

 

jQueryの命令「prepend(…)」のテスト

コードサンプル

実行用サンプル

See the Pen
jquery_prepend_sample
by koganesan (@koganesan)
on CodePen.

(※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。)

実行用のサンプルは、コードサンプルを元にボタンを押すとスクリプトが実行される様にカスタマイズしています。

 

ボタンをクリックしてみると、id=”test”が設定されたpタグの「内側」に、strongタグで囲まれた要素が「追加」されます。

 

実行用サンプル2

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がスッキリする話【デモサンプル付き】- まとめ おつかれ様ネコ

一度一通り試してみて分かった気になるけど、しばらくするとモヤモヤしてくるjQueryの命令「prepend()」、「before()」、「prependTo()」。

ややこしくて混同しやすいですが、この記事をご覧いただきスッキリしていただけたら幸いです。

ぜひ確認、勉強用にご活用ください。

 

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...
【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】なんか小難しくて、jQueryの書き方がスッキリ分からない…。そんな方へ向けて、jQueryの基本的な書き方として、CSSの指定の仕方を例に簡単、分かりやすく解説しています。jQueryプラグインの設置やカスタマイズでお困りの方は是非参考にご覧ください。...
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...
プログラミングなんて自分にできるの?そんな方はスクールの無料体験がオススメ。
こがねさん
こがねさん

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ…。」

AIソルトくん
AIソルトくん
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事がれば、あとは独学でも様々な言語に手を広げていく事ができます

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「短期間でプログラミングスキルを身に付けたい。」
「しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そんな方は最初に短期間スクールで学んでみる事もオススメです。

もちろん今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しています。

「余計な回り道を省いて、手っ取り早くしっかりとしたスキルを身に着けたい。」

そういった方は、実績のあるオンラインスクールを一度体験してみるという方法もあります。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でもTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースも用意されています。

独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料コースを体験してみると、プログラミング学習の行きづまりを解消すると共に、楽しさや将来への道が大きく開ける可能性があります。

無料コースを試してみてやめるもよし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみてください。
そうする事で様々なプログラミング言語の習得の難易度も一気に下がります。

奪われないし裏切らないスキルは、きっとあなたの人生の助けになります。

関連記事