KONOTI

この世界で得た知識・情報まとめ

【JavaScript】動的にid属性を追加する方法

  • 作成日:2018/06/01
  • 更新日:2018/10/12

JavaScriptを使ってHTMLの要素にid属性を付与する方法です。

【JavaScript】動的にid属性を追加する方法

id属性の追加

まず、以下のようなdiv要素があるとします。

HTML
    <div class="hoge">1つ目の要素 </div>

この要素にはクラス名はついていますがid名はついていないので、 この要素に対してid属性を追加したいと思います。

具体的には以下のようなJavaScriptを追加します。

JavaScript
    //hogeクラスの要素取得
    var tmp = document.getElementsByClassName("hoege") ;

    //付与するid名
    var val="testID";

    //id属性追加
    tmp[0].setAttribute("id",val);

2行目でid属性の追加先となる要素を取得します。ここではhogeクラスですね。 クラス名の取得はgetElementsByClassNameメソッドを使用します。 このメソッドの戻り値は配列なのでtmpも配列になります。

getElementsByClassName

クラス名は同じ名前のものが複数ある可能性があるため、戻り値は配列です。 idを取得するgetElementByIdはid自体が一意なので戻り値は1つだけです。

8行目で取得した要素に対してid属性を追加します。 使うのはsetAttributeメソッドです。

リファレンス

        element.setAttribute(name,value);
                        
【仕様】

属性を追加・修正する

【引数】
  • name:属性名
  • value:値

elementは追加先の要素です。今回はhogeクラスが1つだけなのでtmp[0]となります。 そしてnameに固定値「id」を、valueにid名をセットしてsetAttributeメソッドを使用します。

補足

hogeクラスが複数ある場合は何番目のクラスに追加したいかでtmpの添え字は変わります。 2番目ならtmp[1],3番目ならtmp[2]ですね。

以上でJavaScriptを使った動的なid名の追加は完了です。

複数のid属性を追加

先ほどは1つの要素に対してid属性を追加しましたが、 今度は複数の要素に対してそれぞれ一意のidを付与するやり方をご紹介します。

HTML
    <div class="hoge">1つ目の要素 </div>
    <div class="hoge">2つ目の要素 </div>
    <div class="hoge">3つ目の要素 </div>

条件として、付与するid名は「固定文字+数値」としています。 ここでは「testID0、testID1・・」のようにtestIDの末尾に0から始まる数値をつけます。

JavaScript
    //複数のdiv要素に動的なidをつける
    var moji = "testID"
    var tmp = document.getElementsByClassName("hoge") ;

    for(var i=0;i<=tmp.length-1;i++){
        //id追加
        tmp[i].setAttribute("id",moji+i);
    }

3行目でhogeクラスの要素を取得します。ここでは3つのhogeクラスが変数tmpに配列として格納されます。

5行目で配列の要素数分だけループします。

7行目でidを追加します。setAttributeのvalueをmoji+iとしているところがポイントです。 iはfor文により勝手にインクリメントされていく変数なので、これをid名の末尾に付与することで 一意のidを作成します。

やっていることは単純で、1つのid追加をfor文でループしているだけです。 追加するid名は今回はfor文の変数を利用しましたが、工夫次第で好きな名前がつけれるかと思います。

この記事のシェアはこちらから

当サイトについて

当サイト(KONOTI)は、日常生活において運営者が得た情報をご紹介するサイトです。 ジャンルに多少の偏りはありますが、基本的には様々な情報を取り扱っていく予定です。

Contact

当サイトへのご連絡は以下よりお願いします。

PAGE TOP ▲

© Copyright 2019 KONOTI