jQueryでappendメソッドを使って要素を追加する方法【初心者向け】
プログラミング初心者向けに、jQueryでCSSを追加や変更する方法を解説しています。jQueryを使えば、何か動きをした時に特定の要素のスタイルを変えることが可能です。Webサイトの表現の幅が広がるので知っておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
nakamoto
JavaScriptのライブラリであるjQueryでappendを使って要素を追加する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
jQueryでappendメソッドを使って要素を追加することで、表示結果を変えられます。
実務でもjQueryでappendメソッドを使って要素を追加して、ユーザーの操作に応じて表示結果を変えるため、ぜひ学習してみてください。
Webデザインをしていて、ユーザーがボタンを押すと何か表示したい、追加したいといった要望が出ることがよくあります。
そんな時に役に立つのがappendメソッドです。
今回はそんなappendメソッドについて解説していきたいと思います。
目次
- appendメソッドとは
- appendメソッドの書き方
- appendメソッドと類似するメソッド
- appendメソッドの応用
- 実際に書いてみよう
- appendとprependとafterとbeforeの違いを実際に書いてみよう
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
appendメソッドとは
appendメソッドは、HTML要素を動的に追加できるメソッドです。
appendメソッドを使用すれば、ほんの数行でHTML要素を追加できるためとても便利です。
例えば、ユーザーがボタンをクリックした操作に応じて、Webサイトの表示を変化させることが可能です。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！ある要素のCSSを変更する方法はわかったのですが、要素を追加する方法ってありますか？
もちろん。要素の追加・新規作成・削除・変更があるね。
たくさんあるんですねー。
だいたいそういうのがあるって覚えるといいよ。では、要素を追加してみよう！
appendメソッドの書き方
appendメソッドはとても簡単に書くことができます。
基本の書き方
次のように、セレクタでクラス・ID指定をした後に、appendを呼び出し、追加するものを指定します。
$("セレクタ").append("追加するもの");
複数の要素を追加する書き方
次のように追加するものへ複数の要素を指定することで、複数の要素の追加もできます。
$("セレクタ").append('<li>リスト1</li><li>リスト2</li><li>リスト3</li>')
appendメソッドと類似するメソッド
appendメソッドと類似したメソッドには、次の5つがあります。
- appendTo()
- prepend()
- prependTo()
- after()
- before()
appendTo()
append()とappendTo()の違いは、文法上の違いが一番大きいです。
次のようにappend()の文法とは逆の位置に、セレクタと追加するものの指定を行います。
appendTo()の書き方
$("追加するもの").appendTo("セレクタ");指定する値が逆ということは、処理後の返り値もappend()とappendTo()では異なります。
console.log(append);では、#appendが表示されます。
console.log(appendTo);では、spanが表示されます。
返り値は、メソッドの前に指定した値に影響するという文法を理解したうえで、使用するとよいです。
なお、appendのほうがappendToより、処理が若干速いです。
let append=$("#append").append('<span>Techacademy</span>');
let appendTo=$('<span>Techacademy</span>').appendTo("#append");
console.log(append);
console.log(appendTo);
prepend()
append()が指定した要素の最後に要素が追加されるのに対し、prepend()は要素の先頭に追加されるという違いがあります。
prepend()の書き方
$("セレクタ").prepend("追加するもの");prependTo()
prependTo()は、prepend()同様、要素の先頭に追加されます。
append()とappendTo()の違いと同様、prependTo()とprepend()には文法で指定する順番が逆という違いが存在します。
prependTo()の書き方
$("追加するもの").prependTo("セレクタ");
after()
after()は、append()と文法は同じです。
append()では、セレクタの内側に追加されました。
after()ではセレクタの外側、かつ該当セレクタの後ろの要素として追加されます。
after()の書き方
$("セレクタ").after("追加するもの");
before()
before()は、append()と文法は同じです。
append()では、セレクタの内側に追加されました。
before()では、セレクタの外側、かつ該当セレクタの前の要素として追加されます。
before()の書き方
$("セレクタ").before("追加するもの");
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
appendメソッドの応用
appendメソッドを利用した移動
appendを利用すると、次の文法で要素の移動が可能です。
$("移動先の要素").prepend("移動する要素")
要素か要素の中身の削除
appendメソッドを利用して要素を追加した後、remove()やempty()で削除が可能です。
removeメソッドでは要素そのものを削除できます。
emptyメソッドでは要素に記載された文字などを削除できます。
$(セレクタ).remove( );
$(セレクタ).empty( );
実際に書いてみよう
それでは簡単にappendの処理を書いていきましょう。
今回はボタンをクリックすると、ulタグ内にli要素が追加されていくプログラムを書いていきます。
サンプルコード
<!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>実行結果
解説
$(“button”).click(function() {では、ボタンクリックの際に発火するイベントを作成して、その中でappendメソッドを実行しています。
$(“ul”).append(“<li>追加</li>”);では、セレクタではulタグを指定してそのセレクタを対象にliタグを追加するappendメソッドを書いています。
ボタンを押すたびにappendメソッドが呼ばれ、要素が増えていきます。
実行結果では3回buttonをクリックした結果です。
appendとprependとafterとbeforeの違いを実際に書いてみよう
サンプルコード
<!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").before('<div>before</div>')
$("ul").after('<div>after</div>')
$("ul").prepend('<span>prepend</span>')
$("ul").append('<span>append</span>');
$("ul").css("background-color","#218838");
$("div").css("background-color","#de77c7");
});
});
</script>
</head>
<body>
<div>
<ul>
<button>button</button>
</ul>
</div>
</body>
</html>
実行結果
解説
HTMLの<button>button</button>をクリックしたら、ul要素を基準として要素が追加されるコードです。
$(“ul”).before(‘<div>before</div>’)では、ulの要素の外側であるピンク色の領域で、要素の前に新たに<div>before</div>が追加されました。
$(“ul”).after(‘<div>after</div>)では、ulの要素の外側であるピンク色の領域で、要素の後ろに新たに<div>after</div>が追加されました。
$(“ul”).prepend(‘<span>prepend</span>’)では、ulの要素の内側の<button>button</button>の直前に、<span>prepend</span>が追加されました。
$(“ul”).append(‘<span>append</span>’);では、ulの要素の内側の<button>button</button>の直後に、<span>append</span>が追加されました。
$(“ul”).css(“background-color”,”#218838″);では、ulの要素の内側を緑色にしてわかりやすくしています。
$(“div”).css(“background-color”,”#de77c7″);では、ulの要素の外側をピンク色にしてわかりやすくしています。
まとめ
今回はappendメソッドについて解説していきました。
append()は、要素の最後に追加されました。
appendTo()は、append()同様、要素の最後に追加されました。
prepend()は、要素の先頭に追加されました。
prependTo()は、prepend()同様、要素の先頭に追加されました。
after()では、セレクタの外側で、かつ、該当セレクタの後ろの要素として追加されました。
before()では、セレクタの外側で、かつ、該当セレクタの前の要素として追加されました。
JavaScriptで書く「let,var,const」の違い・使い分け も参考にしてみてください。
ボタンを押すと、ulタグの中にliタグが増えていきますね。
(セレクタ).append()では、一番後ろに追加されていくんだ。前から追加していくメソッドもあるし、削除するメソッドもあるよ。
応用すると、いろいろなことに使えそうですね！
そうそう。けっこう技巧的なことができるんだよ。JavaScriptやjQueryはPHPなどの言語とも連帯できるので、応用の幅は広いんだ。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
