jQueryでappendメソッドを使って要素を追加する方法【初心者向け】
プログラミング初心者向けに、jQueryでCSSを追加や変更する方法を解説しています。jQueryを使えば、何か動きをした時に特定の要素のスタイルを変えることが可能です。Webサイトの表現の幅が広がるので知っておくと良いでしょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptのライブラリであるjQueryでappendを使って要素を追加する方法を解説しています。
Webデザインをしていて、ユーザーがボタンを押すと何か表示したい、追加したいといった要望が出ることが良くあります。そんな時に役に立つのがappendメソッドです。今回はそんなappendメソッドについて解説していきたいと思います。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
本記事はJavaScriptを学べる、テックアカデミーのフロントエンドコースの内容をもとにしています。
目次
appendメソッドとは
appendメソッドはhtml要素を動的に追加することができるメソッドです。
appendメソッドを使用すればほんの数行でhtml要素を追加することができるのでとても便利です。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！ある要素のCSSを変更する方法はわかったのですが、要素を追加する方法ってありますか？
もちろん。要素の追加・新規作成・削除・変更があるね。
たくさんあるんですねー。
だいたいそういうのがあるって覚えるといいよ。では、要素を追加してみよう！
appendメソッドの書き方
先述の通りappendメソッドはとても簡単に書くことができます。
$(‘セレクタ’).append(‘追加するもの’);
セレクタでクラス、ID指定をした後に、appendを呼び出し、追加するものを指定します。
実際に書いてみよう
それでは簡単にappendの処理を書いていきましょう。今回はボタンをクリックするとulタグ内にli要素が追加されていくプログラムを書いていきたいと思います。以下がコードです。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$("button").click(function() {
$("ul").append("<li>追加</li>");
});
});
</script>
</head>
<body>
<button>button</button>
<ul>
</ul>
</body>
</html>
ボタンクリックの際に発火するイベントを作成して、その中でappendメソッドを実行しています。
セレクタではulタグを指定してそのセレクタを対象にliタグを追加するappendメソッドを書いています。
そのためボタンを押すたびにappendメソッドが呼ばれ、要素が増えていきます。以下のようになれば成功です。
まとめ
今回はappendメソッドについて解説していきました。
appendメソッドを使用すれば簡単にhtml要素を追加することが分かっていただけたと思います。今回はliタグを追加するという簡単な処理でしたが、使いこなせばポップアップやスライドインメニューを追加するなんてこともできます。
ボタンを押すと、ulタグの中にliタグが増えていきますね。
(セレクター).append()では、一番後ろに追加されていくんだ。前から追加していくメソッドもあるし、削除するメソッドもあるよ。
応用すると、色々なことに使えそうですね！
そうそう。けっこう技巧的なことが出来るんだよ。JavaScriptやjQueryはPHPなどの言語とも連帯できるので、応用の幅は広いんだ。
監修してくれたメンター
|
中本賢吾（なかもとけんご） 開発実績：事業会社向け新規事業SNS構築・Shopify海外進出ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用した画像解析、店舗検索スマホアプリ開発、不動産賃貸・売買事業者様向けWEBシステム、政府系金融機関向けVue.jsによるフロントエンド開発、など。 ボランティアでプログラミング学校を運営し、中学生がノーコードチャットアプリリリース、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞など実績多数。 |
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
