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

2014年3月26日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>

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>

<!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>

<!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>

「追加」ボタンを押すと、セレクトボックスが追加されます。
下記コードが生成されます
<select><option value="1">東京</option><option value="3">福岡</option></select>

JavaScript

Posted by arkgame

関連投稿: