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

id属性の追加

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

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

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

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

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

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

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

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

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

        element.setAttribute(name,value);
                        

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

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

複数のid属性を追加

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

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

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

    //複数の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文の変数を利用しましたが、工夫次第で好きな名前がつけれるかと思います。