jQueryでappendメソッドを使って要素を追加する方法【初心者向け】
プログラミング初心者向けに、jQueryでCSSを追加や変更する方法を解説しています。jQueryを使えば、何か動きをした時に特定の要素のスタイルを変えることが可能です。Webサイトの表現の幅が広がるので知っておくと良いでしょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。
JavaScriptのライブラリであるjQueryでappendを使って要素を追加する方法を解説しています。
Webデザインをしていて、ユーザーがボタンを押すと何か表示したい、追加したいといった要望が出ることが良くあります。そんな時に役に立つのがappendメソッドです。今回はそんなappendメソッドについて解説していきたいと思います。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
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などの言語とも連帯できるので、応用の幅は広いんだ。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
