[JavaScript]appendChildでセレクトボックスを追加

2014年6月8日2021年10月25日

書式
1.var oldChild = node.removeChild(child);
Node.removeChild() メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。
2.var element = document.createElement(tagName[, options]);
引数　tagName
生成される要素の型を特定する文字列。生成される要素の nodeName は tagName の値で初期化されます。
例
let 変数名 = document.createElement(“select")

3.var aChild = element.appendChild(aChild);
引数 aChile 引数親ノードに追加する子ノード(要素)

使用例

<div id="cft"></div>
<p><input type="button" value="追加" onclick="add()" /></p>
<p><input type="button" value="削除" onclick="del()" /></p>

<script>
  /*セレクトボックスに選択項目を追加*/
  function add() {
    const cft = document.getElementById("cft");
    // 要素の追加
    if (!cft.hasChildNodes()) {
      //select要素を作成
      let cftSel = document.createElement("select");
      //option要素を作成
      let cftA = document.createElement("option");
      //option要素のtext、valueを設定
      cftA.text = "東京";
      cftA.value = "101";
      
      let cftB = document.createElement("option");
      cftB.text = "大阪";
      cftB.value = "202";
      // option要素変数をselect要素に追加
      cftSel.appendChild(cftA);
      cftSel.appendChild(cftB);
      // div要素にselect要素を追加
      cft.appendChild(cftSel);
    }
  }
  /*セレクトボックスを削除*/
  function del() {
   // div要素の取得
    let cft = document.getElementById("cft");
    if (cft.hasChildNodes()) {
     // 子ノードを取り除く
      cft.removeChild(cft.firstChild);
    }
  }
</script>

結果
「追加」ボタンを押下すると、セレクトボックスが作成れます
「削除」ボタンを押下すると、セレクトボックスが削除されます