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

Javascript
プログラミング言語

公開日時: 2019-12-06 　更新日時: 2022-06-08

この記事でわかること

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

システム エンジニア: jQueryを利用してタグを追加するにはどのようにしたら良いのでしょうか？教えてください！

プロジェクト マネージャー: jQueryでは、たくさんの種類のタグを簡単に追加できます。追加する手順と追加できるタグの種類を一緒に確認しましょう。

jQueryのタグ追加方法

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

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

$('対象のタグ').append('追加するタグ')

1	$('対象のタグ').append('追加するタグ')

例を以下に記載します。

<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>

<head>

</head>

<body>

</div>

$('#btn1').on('click', function() {

$('#target1').append('<input type="text">');

});

</script>

</body>

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

$('#target1').append('<input type="text" />');

11	$('#target1').append('<input type="text" />');

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

<input type="text">

6	<input type="text">

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

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

<div id="target1">
    <input type="text"> <input type="text">
</div>

</div>

実際の画面は以下の通りです。
・初期表示

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

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

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

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

テキストを追加する

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

以下に例を記載します。

<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>

<head>

</head>

<body>

target2

</div>

$('#btn2').on('click', function() {

$('#target2').append('テキスト追加');

});

</script>

</body>

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

$('#target2').append('テキスト追加');

11	$('#target2').append('テキスト追加');

実際の画面は以下のようになります。
・初期表示時

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

リストを追加する

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

<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>

<head>

</head>

<body>

<li>パイナップル</li>

</ul>

$('#btn3').on('click', function() {

$('#target3').append('<li>オレンジ</li>');

});

</script>

</body>

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

$('#target3').append('<li>オレンジ</li>');

13	$('#target3').append('<li>オレンジ</li>');

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

<ul id="target3">
    <li>イチゴ</li>
    <li>メロン</li>
    <li>パイナップル</li>
    <li>オレンジ</li>
</ul>

<li>パイナップル</li>

</ul>

実際の画面は以下の通りです。
・初期表示時

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

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

システム エンジニア: appendメソッドを使うことで、テキストやHTMLタグなど、追加できることが分かりました。

プロジェクト マネージャー: 追加するコードも簡単でしたね。他にも追加できるものはたくさんあるので、appendメソッドでタグの追加を行ってみてください。

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

jQueryのタグ追加方法

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

テキストを追加する

リストを追加する

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

jQueryのタグ追加方法

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

テキストを追加する

リストを追加する

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでCSSのスタイルを変更する方法

jQuery UIのダウンロードの手順と使い方

jQueryのサンプル利用のメリットとデメリット&使えるサンプル3選

【jQueryのスクロールイベント】Webページのスクロール位置を取得するプログラム

【2020年1月版】最新のjQueryのバージョンは3.4.1 使い方や注目の機能とは