「JavaScript」createElementでセレクトボックスを追加する
環境
Google Chrome 99.0.4844.51
書式
1.selectタグ作成
const 変数1= document.createElement(“select");
2.optionタグ作成
const 変数2 = document.createElement(“option");
optionの属性(text,value)を設定します。
使用例
<!DOCTYPE html> <html> <body> <div id="cft"></div> <p><input type="button" value="追加" onclick="addBtn()" /></p> <script> function addBtn() { const fc = document.getElementById("cft"); // 要素の追加 if (!fc.hasChildNodes()) { //selectタグ作成 const selEle = document.createElement("select"); //optionタグ作成 const optS = document.createElement("option"); //optionの属性を設定text value optS.text = "東京"; optS.value = "1"; const optT = document.createElement("option"); optT.text = "福岡"; optT.value = "3"; //option子ノードを追加 selEle.appendChild(optS); selEle.appendChild(optT); // selectノードを追加 fc.appendChild(selEle); } } </script> </body> </html>
実行結果
「追加」ボタンを押すと、セレクトボックスが追加されます。 下記コードが生成されます <select><option value="1">東京</option><option value="3">福岡</option></select>