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要素を追加することができるのでとても便利です。
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タグを追加するという簡単な処理でしたが、使いこなせばポップアップやスライドインメニューを追加するなんてこともできます。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
