「JavaScript」createElementでセレクトボックスを追加する

2022年3月16日

環境
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="追加" /></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>

 

JavaScript

Posted by arkgame