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を使って取得できます。