如何使用JS为单选按钮创建文本节点？

Question

我正在尝试使用 JavaScript 制作一个单选按钮。使用HTML很容易，即到目前为止，使用JS，我能够创建，但我不知道如何为它创建文本节点。另外，我想在正文的第三个div元素中附加此表单，那么它应该是DOM导航吗？这是我的代码：<input type="radio" name="sType" value="m">MALE<input type="radio" name="sType" value="m">MALEid='user_input'

document.getElementsById('user_input').childNodes[0].appendChild(f);

var f = document.createElement("form");

f.setAttribute("id", "myForm");

f.setAttribute('method',"post");

f.setAttribute('action',"ride_test.php");

var radio1 = document.createElement("input"); //input element, text

radio1.setAttribute("id","radio1");

radio1.setAttribute('type',"radio");

radio1.setAttribute('name',"sType");

radio1.setAttribute('value',"m");

f.appendChild(radio1);       

Answer 1

如果要向单选按钮添加说明，则应创建一个并在此处插入无线电的说明。labellet f = document.createElement("form");let radio1 = document.createElement("input"); //input element, textradio1.setAttribute("id","radio1");radio1.setAttribute('type',"radio");radio1.setAttribute('name',"sType");radio1.setAttribute('value',"m");let label = document.createElement('label');label.textContent = "MALE";f.appendChild(radio1);f.appendChild(label);document.body.appendChild(f)您也可以创建一个文本节点并在输入后追加，但这不是推荐的选项：//The same as abovelet desc = document.createTextNode("MALE")f.appendChild(radio1)f.appendChild(desc);document.body.appendChild(f)`小提琴：https://jsfiddle.net/dpu54as9/

Answer 2

输入标记是自动括起来的标记，不应包含任何文本。您需要在旁边使用标签标签（您可以检查此链接），例如：<input type="radio" name="sType" id="radio1" value="m"/><label for="radio1">MALE</label>要在代码中执行此操作，只需创建一个新的标签元素，设置其文本并追加到窗体中：var f = document.createElement("form");f.setAttribute("id", "myForm");f.setAttribute('method',"post");f.setAttribute('action',"ride_test.php");var radio1 = document.createElement("input"); //input element, textvar label1 = document.createElement("label");// link label to input through idlabel1.setAttribute("for", "radio1");label1.innerHTML = "MALE";radio1.setAttribute("id","radio1");radio1.setAttribute('type',"radio");radio1.setAttribute('name',"sType");radio1.setAttribute('value',"m");f.appendChild(radio1);f.appendChild(label1);请注意，ID 是唯一的，这意味着 DOM 上不能同时具有多个具有相同名称的 ID。实现所需内容的最佳方法是更改为类（不是唯一的），然后追加到 DOM，如下所示：user_inputdocument.body.getElementsByClassName('user_input')[2].appendChild(f);