.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのタグ追加方法とタグの種類

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

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQueryのタグ追加方法とタグの種類
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

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

    システム
    エンジニア
    jQueryを利用してタグを追加するにはどのようにしたら良いのでしょうか?教えてください!
    プロジェクト
    マネージャー
    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タグの追加も同様の手順で追加できました。

    システム
    エンジニア
    appendメソッドを使うことで、テキストやHTMLタグなど、追加できることが分かりました。
    プロジェクト
    マネージャー
    追加するコードも簡単でしたね。他にも追加できるものはたくさんあるので、appendメソッドでタグの追加を行ってみてください。

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

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

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

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

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

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

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

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

    • 充実した研修制度

      充実した研修制度

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

    • 資格取得を応援

      資格取得を応援

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

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

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

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

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

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

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

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

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job