2016-05-15 75 views
3

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

<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> 
+1

代码工作罚款:https://jsfiddle.net/ag663kw8/'name'不会在您的''旁边添加文字'车辆';这就是'

+0

您是否尝试添加标签? – Ygalbel

回答

3

您需要添加一个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); 
+0

A [* label *](http://w3c.github.io/html/sec-forms.html#the-label-element)通过使用表单控件上的ID与*为标签上的*属性,或将标签包裹在控件上。只需将标签放置在控件旁边即可,与使用跨度或纯文本节点相同。 – RobG

1

您应该复选框为您创建复选框动态创建一个标签,并将其追加到身体

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