【jQuery入門編】jQueryの読み込み・要素の追加方法

jQueryを読み込んで、要素の追加について解説していきます。
jQueryは多くのWebサイトで使われていて、読み込みも簡単です。要素を追加することができれば、Webサイトに動きを加えられるのでぜひ覚えておきましょう。

プログラマー

jQueryを読み込んで、要素を追加するにはどうやったら良いのでしょう？教えてください！

プロジェクト
リーダー

要素を追加することができれば、Webサイトの機能も幅が広がりますね。方法を一緒に確認しましょう。

jQueryの読み込み方法

jQueryを読み込むにはファイルをダウンロードして読み込む方法と、インターネット上で用意されているファイルを読み込む方法の2通りがあります。

ファイルをダウンロードする方法では、ダウンロードしてからファイルを配置して、それを読み込むという手順になります。少々手間がかかるので、インターネット上で用意されているファイルを読み込む方が簡単です。

インターネット上で読み込むファイルが用意されている場所はいくつかありますが、ここではGoogleで用意されているファイルがあるので、それを読み込みます。
タグ内に以下のscriptタグをそのまま記載するだけです。

上記の1文を記載すれば、jQueryの読み込みは完了です。
たった1文を記載するだけで、簡単に読み込むことができました。

jQueryで要素を追加する方法

jQueryで要素を追加するには、appendというメソッドを使用します。

ここでは、指定した要素の最後に引数で指定した内容を追加していきます。以下に例を記載します。

要素を追加しているのが下記の部分です。

#favoriteという要素を指定して、引数で指定している回答項目を追加します。

実際の画面は以下の通りです。
・初期状態

・「入力欄を追加」ボタンクリック後

プログラマー

jQueryを読み込んで、要素を追加することができました！読み込みも要素の追加も長いコードを書く必要がなく簡単にできました。

プロジェクト
リーダー

要素を追加することができると、Webサイトに様々な機能を付けることができるので、色々と試してみましょう。

jQueryの読み込みと要素の追加は簡単にできる

jQueryを読み込んで、要素の追加を行いました。
読み込みは1文、要素の追加も数行のコードを書くだけで実現でき、Webサイトに機能を付けることができました。
紹介した手法を使用することで、簡単にjQueryの読み込みと要素の追加は可能です。
要素の追加によってWebサイトの機能の幅も広がるので、ぜひ試してみてください。