Javascript setattribute - 名称和值不起作用答案

【问题标题】：Javascript setattribute - name and value not workJavascript setattribute - 名称和值不起作用
【发布时间】：2016-05-15 20:09:26
【问题描述】：

当我实现此代码时 - 复选框的名称不会显示在浏览器旁边的复选框中 - 只是复选框本身。这是什么原因？我是否错误地使用了 setattribute-function？

<script type="text/javascript">

    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.setAttribute("value", "car");
    x.setAttribute("name", "vehicle");
    document.body.appendChild(x);

</script>

【问题讨论】：

代码工作正常：jsfiddle.net/ag663kw8 name 不会在您的 <input /> 旁边添加文本 vehicle；这就是<label> 的用途。
您尝试添加标签吗？

标签： javascript dom setattribute

【解决方案1】：

你需要添加一个label元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.setAttribute("value", "car");
x.setAttribute("name", "vehicle");
document.body.appendChild(x);

var label = document.createElement("label");
label.textContent = "vehicle";
document.body.appendChild(label);

【讨论】：

label 与表单控件相关联，方法是使用表单控件上的 ID 和标签上的 for 属性，或者将标签包裹在控件周围。简单地将标签放置在控件旁边与仅使用跨度或纯文本节点相同。

【解决方案2】：

您应该在动态创建复选框时为复选框创建一个标签并将其附加到正文

    //create checkbox
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.setAttribute("value", "car");
    x.setAttribute("name", "vehicle");

    //create label
    var y = document.createElement("label");
    y.innerHTML = "Here goes the text";

    //Append Them to body
    document.body.appendChild(x);
    document.body.appendChild(y);

【讨论】：