为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

海绵宝宝撒 2022-09-23 16:23:43

我正在尝试使用 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);       


查看完整描述

2 回答

?
青春有我

TA贡献1450条经验 获得超8个赞

如果要向单选按钮添加说明,则应创建一个并在此处插入无线电的说明。label


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


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

radio1.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 above

let desc = document.createTextNode("MALE")


f.appendChild(radio1)

f.appendChild(desc);

document.body.appendChild(f)`

小提琴:https://jsfiddle.net/dpu54as9/


查看完整回答
反对 回复 5天前
?
慕尼黑5688855

TA贡献1527条经验 获得超1个赞

输入标记是自动括起来的标记,不应包含任何文本。您需要在旁边使用标签标签(您可以检查此链接),例如:


<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, text

var label1 = document.createElement("label");

// link label to input through id

label1.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_input


document.body.getElementsByClassName('user_input')[2].appendChild(f);


查看完整回答
反对 回复 5天前
  • 2 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信