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

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>

</body>

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

<!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>」という要素が作成されます。

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

JavaScript

Posted by arkgame

関連投稿: