竹田奈央 
jQueryで要素を追加する方法ついて知りたいな。
でも、なんか難しそう。
今回の記事は上記のような方におすすめ。
今回の記事では、jQueryでプルダウンが変更された際、エラー要素を追加する方法について…jQuery初心者でもわかるよう、わかりやすく解説いたします！
jQueryとBootstrapの紐付けって難しそう、と苦手意識を持つ方にもおすすめの記事です！
なお、今回は「プルダウンが変更された時」に関しての説明ですが、例えば「ボタンにフォーカスされた時」や「ボタンが押された時」など、他のイベントにも応用できるかと思います！
気になる箇所あったらコメントで教えてね。
本記事の内容
なおこの記事は3分で読める内容です。
jQuery：イベントの種類
jQueryのイベントには以下の種類があります。「scroll」「change」など、よく使うのもをまとめました。
| イベント | 説明 |
|---|---|
| focus | 要素がフォーカスされた時に発火 |
| load | ドキュメント内の全リソースの読み込みが完了した時に発火 |
| scroll | ドキュメントがスクロールされた時に発火 |
| click | クリックされた時に発火 |
| change | 要素がフォーカスされて値が変更された時 |
jQuery：HTML要素との紐付け
続いて、jQueryとHTML要素との紐付け方法です。例えば、以下のような「select」要素があったとします。
<label>西暦: </label>
<select class="form-control" name="name" id="name">
<option selected="selected" value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>年この時点では、まだselectボックスの表示のみです。こんな感じ↓ですね！
このままでは、jQuery側から操作できないので、紐付け用のclass名：triggerを設定します。
<!-- このままではjQueryで操作できないので、 -->
<select class="form-control" name="name" id="name">
<!-- ↓「trigger」classを設定する -->
<select class="form-control trigger" name="name" id="name">あとは、jQuery側でclass名を指定して、処理を記述するだけです。ちなみに今回は、セレクトボックスが変更された時に、処理を実施したいので「change」を指定しています。
// 値が変更された時に検知したい場合
$(function () {
$(".trigger").on("change", function () {
// 処理を記述
});
});その他にも、フォーカスされた時など色々タイミングを指定できるので、ぜひこちらの記事、「jQuery on() イベントの種類」をご覧ください。フォーカスされたときは、こちら↓
// 要素がフォーカスされた時に検知したい場合
$(function () {
$(".trigger").on("focus", function () {
// 処理を記述
});
});jQuery：要素を追加する方法
通常のHTML要素を追加する方法と、Bootstrap要素を追加する方法についてご紹介します！
jQuery：HTML要素を追加する方法
まず、HTML内の要素を追加したい箇所にclass名をつけます。
<!-- HTML要素を作成する -->
<div class="alert-jquery"></div>あとは、その箇所に「append」で追加したい要素を「`」で囲って、記述します。今回の場合は、「trigger」が変更された時に、div要素を追加してみます。また、非常に長いHTMLもベタ書き指定できるので、非常に使い勝手が良いです。
$(function () {
$(".trigger").on("change", function () {
// 要素を追加
$(".alert-jquery").append(`<div>要素です</div>`);
});
});jQuery：Bootstrap要素を追加する方法
もちろん、Bootstrapの要素「ボタン」「アラート」なども追加することができます。
やり方は非常にカンタンで、追加したい要素を「`」で囲ってappendするだけです！通常のHTML要素追加の時とやり方は変わらないですよね。というか、もっと良いやり方はあるとは思いますが、調べたところ、ベタ書きが一番楽でした…💦
多分、もっと良いやり方あるんだろうけど、
ひとまずはコレで…泣
$(function () {
$(".trigger").on("change", function () {
// 要素を追加
$(".alert-jquery").append(`<div class="alert fade in alert-danger">
<button class="close" data-dismiss="alert">×</button>
正しい値を選択してください。
</div>`);
});
});ちなみに、「×」を押したら、クローズするBootstrap要素についての詳細は公式サイトの「Alerts」をご覧ください。
また、Bootstrapに関してですが、ご自分のバージョンによって要素の指定方法も変わってくるので、ぜひ公式サイトをご覧ください。
Bootstrapのアラートを追加すると、プルダウンが変更された時点で、中身の値にかかわらず「問答無用で」アラートが出るようになります。あとは、if分などで、条件指定するのみですね！
jQuery：要素を削除したい
ただ、上記のやり方だと、プルダウンを変更するたびに毎回「正しい値を選択してください。」のアラートが追加されていってしまいます。
表示する数は、１つで良いので、jQueryの要素追加時に元々あった方のアラートを削除します。
要素の中身を削除するには、追加したい要素そのものではなく、親要素に対して「empty()」を使います。※要素そのものを削除するものもありますが、今回は「親要素内の子要素」という指定にたいので「empty()」を使います。
$(function () {
$(".trigger").on("change", function () {
// 一旦要素内をリセットする
$(".alert-jquery").empty();
$(".alert-jquery").append(`<div class="alert fade in alert-danger">
<button class="close" data-dismiss="alert">×</button>
正しい値を選択してください。
</div>`);
});
});まとめ
以上、jQueryのイベント発火時に、Bootstrapの要素を追加する方法をご紹介しました！
今回は「変更されたら発動」ってな感じですが、使う場面は色々応用できるかと思います！Bootstrapとの組み合わせが一見難しそうですが、通常のHTML要素追加とかわりません！
ぜひ、色々試してみてください。
ふー！！ 意外とカンタンだった！！
（深呼吸…）