jQueryでappendメソッドを使って要素を追加する方法【初心者向け】
プログラミング初心者向けに、jQueryでCSSを追加や変更する方法を解説しています。jQueryを使えば、何か動きをした時に特定の要素のスタイルを変えることが可能です。Webサイトの表現の幅が広がるので知っておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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週間限定）
