JavaScript: 要素をまとめて作成・挿入する

JavaScriptで要素をまとめて作成・挿入する方法を紹介・解説します。

要素の作成・挿入から、クラス名を設定、イベントハンドラ設定、独自プロパティ設定と 実践に役立つ内容がつまっています。

今回作成・挿入するのはdiv要素5つです。

id="parent"のdiv要素の中にclass="child"のdiv要素を5つ作ります。

<div id="parent"></div>

この中にdiv要素を5つ作成・挿入し、結果として次のようなツリー構造になります。


div id="parent"
├ div class="child"
├ div class="child"
├ div class="child"
├ div class="child"
└ div class="child"

以下でコード、解説の順番に記述します。

HTML・CSS


<div id="parent"></div>

<style>
    .child {
        width: 100px;
        border: 1px solid silver;
        text-align: center;
    }    
</style>

JavaScript

// div要素を格納する配列
divs = [];

window.onload = function(){
    
    var parent = document.getElementById('parent');

    //div要素を追加
    for (i = 0; i < 5; i++){
        var div = document.createElement('div');
        div.index = i;
        div.textContent = 'No. ' + i;
        div.className = 'child';
        // click時
        div.onclick = myClick;
        parent.appendChild(div);
        // 配列に追加
        divs.push(div); 
    }
}

// クリック時の処理
function myClick(e){
    
    // クリックされた要素のindex
    var i = e.target.index;
    console.log(i);
    
    // 配列divsを利用してtextContentを取得
    var str = divs[i].textContent;
    console.log((str)); 
}

解説

JavaScriptのコード部分は大きく3つに分けることが出来ます。

  • グローバル配列divsの宣言
  • div要素の作成・挿入
  • イベントハンドラ

グローバル配列divs

作成した9つのdiv要素を配列divsに格納します。次のコードの部分です。

// 配列に追加
divs.push(div);

こうすることで、以後は配列divsによって各div要素の値を取得できます。 例えば先頭のindexを取得する場合は「divs[0].index」、 textContentを取得する場合は「divs[0].textContent」となります。

div要素の作成・挿入

var parent = document.getElementById('parent');

//div要素を追加
for (i = 0; i < 5; i++){
    var div = document.createElement('div');
    div.index = i;
    div.textContent = 'No. ' + i;
    div.className = 'child';
    // click時
    div.onclick = myClick;
    parent.appendChild(div);
    // 配列に追加
    divs.push(div); 
}

div要素の作成・挿入と同時に、textContentを設定したり、クラスを設定したり、 イベントハンドラを設定したりしています。

idを指定する場合は「div.id = 'ID名'」と設定します。

イベントハンドラ

// クリック時の処理
function myClick(e){
    
    // クリックされた要素のindex
    var i = e.target.index;
    console.log(i);
    
    // 配列divsを利用してtextContentを取得
    var str = divs[i].textContent;
    console.log((str)); 
}

イベントハンドラです。クリックされた時に実行します。

クリックされた要素は「e.target」で取得できます。

クリックされた要素以外の要素を取得する場合は、 配列divsを使って取得できます。

JavaScript入門