「JavaScript」createElementメソッドでラジオ(radio)ボタン要素を追加するサンプル
環境
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="追加" /> </body> </html>
結果
「追加」ボタンを押すと、「<label for="cityid"> <input type="radio" name="city" id="cityid" value="東京">"東京"</label>」という要素が作成されます。