.net column

.NET開発者のためのブログメディア
コード

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

2019年12月06日

Webアプリケーションを作成していると、クリック時に入力欄を増やしたり、ユーザーの入力内容によって項目の選択肢を増やしたりなど、HTMLのタグを追加したい場合があります。
jQueryを利用すれば、豊富な種類のタグ追加を簡単に行うことができます。

SE
jQueryを利用してタグを追加するにはどのようにしたら良いのでしょうか?教えてください!
PM
jQueryでは、たくさんの種類のタグを簡単に追加できます。追加する手順と追加できるタグの種類を一緒に確認しましょう。

jQueryのタグ追加方法

タグを追加するには、appendメソッドを使用します。
対象のタグの最後に引数で指定したタグを追加する機能です。

タグを追加する基本的なやり方は以下の通りです。

例を以下に記載します。

入力欄追加というボタンをクリックすると、入力欄が1つ増えます。
入力欄を追加しているのはこの処理です。

target1というdivタグが入力欄のテキストボックスをまとめているタグです。
そのdivタグに対して、appendメソッドを実行します。
appendメソッドの引数に、追加したいタグを記載します。
今回の例では入力欄の追加なので、

を引数に指定しています。

appendメソッド実行後のdivタグは以下のようになり、inputタグが1つ増えました。

実際の画面は以下の通りです。
・初期表示
入力欄追加前

・入力欄追加ボタンをクリックした後
入力欄追加後

このように、appendメソッドを使用することで、対象のタグの最後に指定したタグを追加することが可能です。

jQueryで追加できるタグの種類

追加できるタグの種類はたくさんありますので、いくつか紹介します。

テキストを追加する

同じappendメソッドを使用します。
対象のタグに対して、指定したテキストを追加します。

以下に例を記載します。

テキスト追加というボタンをクリックすると、idがtarget2というdivタグに対して、「テキスト追加」というテキストを追加します。
実際に追加する処理は以下の通りです。

実際の画面は以下のようになります。
・初期表示時
テキスト追加前

・テキスト追加ボタンをクリックした後
テキスト追加後

リストを追加する

ulタグを使用して実装しているリストにliタグを追加します。
以下に例を記載します。

果物追加というボタンをクリックすると、idがtarget3というulタグにliタグを追加します。
追加する処理は以下の通りです。

追加を行うと、liタグが1つ増え、以下のようになります。

実際の画面は以下の通りです。
・初期表示時
liタグ追加前

・果物追加ボタンをクリックした後
liタグ追加後

liタグの追加も同様の手順で追加できました。

SE
appendメソッドを使うことで、テキストやHTMLタグなど、追加できることが分かりました。
PM
追加するコードも簡単でしたね。他にも追加できるものはたくさんあるので、appendメソッドでタグの追加を行ってみてください。

jQueryでタグを追加する手順は簡単でコード量も少なく実装できる

jQueryのタグ追加方法は簡単で、実装するコード量も少なく実装できます。
追加できるタグの種類も多岐にわたり、追加する方法を覚えればWebアプリケーションに様々な機能が実装できますので、タグを追加するappendメソッドを使ってみることをおすすめします。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)