jQueryのタグ追加方法とタグの種類
Webアプリケーションを作成していると、クリック時に入力欄を増やしたり、ユーザーの入力内容によって項目の選択肢を増やしたりなど、HTMLのタグを追加したい場合があります。
jQueryを利用すれば、豊富な種類のタグ追加を簡単に行うことができます。
- SE
- jQueryを利用してタグを追加するにはどのようにしたら良いのでしょうか？教えてください！
- PM
- jQueryでは、たくさんの種類のタグを簡単に追加できます。追加する手順と追加できるタグの種類を一緒に確認しましょう。
jQueryのタグ追加方法
タグを追加するには、appendメソッドを使用します。
対象のタグの最後に引数で指定したタグを追加する機能です。
タグを追加する基本的なやり方は以下の通りです。
|
1 |
$('対象のタグ').append('追加するタグ') |
例を以下に記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div id="target1"> <input type="text"> </div> <input type="button" id="btn1" value="入力欄追加"> <script> $('#btn1').on('click', function() { $('#target1').append('<input type="text">'); }); </script> </body> |
入力欄追加というボタンをクリックすると、入力欄が1つ増えます。
入力欄を追加しているのはこの処理です。
|
11 |
$('#target1').append('<input type="text" />'); |
target1というdivタグが入力欄のテキストボックスをまとめているタグです。
そのdivタグに対して、appendメソッドを実行します。
appendメソッドの引数に、追加したいタグを記載します。
今回の例では入力欄の追加なので、
|
6 |
<input type="text"> |
を引数に指定しています。
appendメソッド実行後のdivタグは以下のようになり、inputタグが1つ増えました。
|
1 2 3 |
<div id="target1"> <input type="text"> <input type="text"> </div> |
実際の画面は以下の通りです。
・初期表示
・入力欄追加ボタンをクリックした後
このように、appendメソッドを使用することで、対象のタグの最後に指定したタグを追加することが可能です。
jQueryで追加できるタグの種類
追加できるタグの種類はたくさんありますので、いくつか紹介します。
テキストを追加する
同じappendメソッドを使用します。
対象のタグに対して、指定したテキストを追加します。
以下に例を記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div id="target2"> target2 </div> <input type="button" id="btn2" value="テキスト追加"> <script> $('#btn2').on('click', function() { $('#target2').append('テキスト追加'); }); </script> </body> |
テキスト追加というボタンをクリックすると、idがtarget2というdivタグに対して、「テキスト追加」というテキストを追加します。
実際に追加する処理は以下の通りです。
|
11 |
$('#target2').append('テキスト追加'); |
実際の画面は以下のようになります。
・初期表示時
・テキスト追加ボタンをクリックした後
リストを追加する
ulタグを使用して実装しているリストにliタグを追加します。
以下に例を記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <ul id="target3"> <li>イチゴ</li> <li>メロン</li> <li>パイナップル</li> </ul> <input type="button" id="btn3" value="果物追加"> <script> $('#btn3').on('click', function() { $('#target3').append('<li>オレンジ</li>'); }); </script> </body> |
果物追加というボタンをクリックすると、idがtarget3というulタグにliタグを追加します。
追加する処理は以下の通りです。
|
13 |
$('#target3').append('<li>オレンジ</li>'); |
追加を行うと、liタグが1つ増え、以下のようになります。
|
1 2 3 4 5 6 |
<ul id="target3"> <li>イチゴ</li> <li>メロン</li> <li>パイナップル</li> <li>オレンジ</li> </ul> |
実際の画面は以下の通りです。
・初期表示時
・果物追加ボタンをクリックした後
liタグの追加も同様の手順で追加できました。
- SE
- appendメソッドを使うことで、テキストやHTMLタグなど、追加できることが分かりました。
- PM
- 追加するコードも簡単でしたね。他にも追加できるものはたくさんあるので、appendメソッドでタグの追加を行ってみてください。
jQueryでタグを追加する手順は簡単でコード量も少なく実装できる
jQueryのタグ追加方法は簡単で、実装するコード量も少なく実装できます。
追加できるタグの種類も多岐にわたり、追加する方法を覚えればWebアプリケーションに様々な機能が実装できますので、タグを追加するappendメソッドを使ってみることをおすすめします。
