JavascriptでDOMを動的に生成するシンプルな２つの方法
DOMの一部を可変にしたい場合に、JavascriptからDOMを動的に生成する方法を解説します。
ここではセレクトボックスの選択肢を変化させる方法をとりあげます。
方法１：createElement
こちらの方法は、主に３つの手順で実行できます。
1, DOM要素を document.createElement('タグ名') で生成
2, DOM要素を追加したい親要素を取得（document.getElementById など）
3, 生成したDOM要素を親要素に追加（appendChild）
<body>
<form>
<select id="select_id">
</select>
</form>
</body>// option要素を生成
let x = document.createElement('option');
x.value = "x_value";
x.text = "x_text";
// 親要素の取得 : document.getElementById('select_id')
document.getElementById('select_id').appendChild(x);このとき、 x をデベロッパーツールで確認すると下の画像のようになります。
x にoption要素が入っているのがわかりますね。
方法２：innerHTML
こちらの方法は、２つの手順で実行できます。
1, DOM要素を文字列として生成
2, 親要素のinnerHTML に文字列を格納
<body>
<form>
<select id="select_id">
</select>
</form>
</body>// 文字列としてOptionタグを生成 - 要素を１つだけ追加したい場合
let y = '<option value="y_value">y_text</option>';
document.getElementById('training_type').innerHTML = y;
// 文字列としてOptionタグを生成 - 要素を複数追加したい場合
let y = '<option value="y_value">y_text</option>';
let z = '<option value="z_value">z_text</option>';
document.getElementById('training_type').innerHTML = `${y}${z}`;
こちらの方法のデメリットとしては、innerHTML に直接書き込んでいるので、あとから要素を追加したくても上書きされてしまうことです。
そのため、複数の要素を入れたい場合には、上のコードのように、ちょっと書き方を変える必要があるわけですね。
ここでは、バッククォートの間に ${変数名} を入れて、変数を展開しています。詳しく知りたい方は「テンプレート構文」で調べてみてください。
ちなみに、文字列として生成した y, z をデベロッパーツールで確認すると、下のようになります。
さきほどの x と違うのは、DOM要素がダブルクォーテーションで囲まれており、文字列として認識されている点ですね。
そのため、こちらの y, z を appendChild で追加しようとしても「それはOption要素じゃありません！」と怒られます。
どっちの方法がオススメ？
もし、同じ要素に何度もDOMを生成したい場合は、createElement + appendChild の方法がオススメです。
ですが、innerHTML に直接書き込む手法の場合は、コードを読んだときに「最終的にこういうDOMが作りたいのね」というのがわかりやすくなりますね。
結論から言えば「状況による」のですが、もしよければ参考にしてみてください！
この記事が気に入ったらサポートをしてみませんか？