jQueryのタグ追加方法とタグの種類

Webアプリケーションを作成していると、クリック時に入力欄を増やしたり、ユーザーの入力内容によって項目の選択肢を増やしたりなど、HTMLのタグを追加したい場合があります。
jQueryを利用すれば、豊富な種類のタグ追加を簡単に行うことができます。
- システム
エンジニア - jQueryを利用してタグを追加するにはどのようにしたら良いのでしょうか?教えてください!
- プロジェクト
マネージャー - 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タグの追加も同様の手順で追加できました。
- システム
エンジニア - appendメソッドを使うことで、テキストやHTMLタグなど、追加できることが分かりました。
- プロジェクト
マネージャー - 追加するコードも簡単でしたね。他にも追加できるものはたくさんあるので、appendメソッドでタグの追加を行ってみてください。
jQueryでタグを追加する手順は簡単でコード量も少なく実装できる
jQueryのタグ追加方法は簡単で、実装するコード量も少なく実装できます。
追加できるタグの種類も多岐にわたり、追加する方法を覚えればWebアプリケーションに様々な機能が実装できますので、タグを追加するappendメソッドを使ってみることをおすすめします。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)