[JavaScript]createElementでラジオボタンを追加

2014年3月20日2021年10月25日

書式
1.createTextNode()
var text = document.createTextNode(data);
新しい Text ノードを生成します。

2.hasChildNodes
node.hasChildNodes()
hasChildNodes は指定したノードが子ノードを持つか否かを示す真偽値を返します。

使用例

<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()) {
      //input要素を作成
      const ipA = document.createElement("input");
      // typeを指定
      ipA.type = "radio";
      // nameを指定
      ipA.name = "city";
      // valueを指定
      ipA.value = "東京";
      // idを指定
      ipA.id = "tokyo";
      
      // textNodeの要素を作成
      const txtA = document.createTextNode("東京");
      // labelの要素
      const cftLab = document.createElement("label");
      cftLab.htmlFor = ipA.id;
      //子ノード追加
      cftLab.appendChild(ipA);
      cftLab.appendChild(txtA);

      // div要素にradio要素を追加
      cft.appendChild(cftLab);
    }
  }
  /*ラジオボタンを削除*/
  function del() {
   // div要素の取得
    let cft = document.getElementById("cft");
    if (cft.hasChildNodes()) {
     // 子ノードを取り除く
      cft.removeChild(cft.firstChild);
    }
  }
</script>

実行結果
「追加」ボタンを押下すると、ラジオボタンが作成れます
「削除」ボタンを押下すると、ラジオボタンが削除されます