「JavaScript」createElementメソッドでラジオ(radio)ボタン要素を追加するサンプル

2022年10月3日

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.62
関数
1.Node.appendChild()
appendChild() は Node インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。
2.Document.createElement()
HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は HTMLUnknownElement を生成します。
3.Document.createTextNode()
新しい Text ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。

使用例

<!DOCTYPE html>
<html>
<body>
<script>
 function addBtn() {
    const cft = document.getElementById("cft");
    // 要素の追加
    if (!cft.hasChildNodes()) {
    　// input要素を作成します
      const intA = document.createElement("input");
      intA.type = "radio";
      intA.name = "city";
      intA.id = "cityid";
      intA.value = "東京";
      
      //　ラジオボタンの文字列を作成します
      const txtA = document.createTextNode("東京");
      // label要素を作成します
      const labA = document.createElement("label");
      labA.htmlFor = intA.id;
      labA.appendChild(intA);
      labA.appendChild(txtA);
      
      // 末尾にノードを追加
      cft.appendChild(labA);
    }
  }
</script>

<div id="cft"></div>
<input type="button" value="追加" onclick="addBtn()" />

</body>
</html>

結果

「追加」ボタンを押すと、「<label for="cityid"> <input type="radio" name="city" id="cityid" value="東京">"東京"</label>」という要素が作成されます。

JavaScript

Posted by arkgame

関連記事: