javascript - 为单选按钮提供动态标签

Question

我正在尝试创建一个动态表单，因此单击按钮即可调用 Javascript 函数。这是函数:

function addradiobutton(type){
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);   

    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    foo.appendChild(element);
    counter=counter+1;
 }

这段代码添加了一个单选按钮，它的标签是这样的

<input type="radio" name="radio" value="radio">

但我想让这段代码像这样。

 <input type="radio" name="radio" value="radio">WATER</input>

我不介意关闭输入标签，但我想在代码末尾获取值“Water”。
仅以水为例，它的值(value)也是动态的。
我该怎么办？

Answer 1

试试这个

<script type="text/javascript">
        var counter = 0;
        function addradiobutton(type, text) {
            var label = document.createElement("label");

            var element = document.createElement("input");
            //Assign different attributes to the element.
            element.setAttribute("type", type);
            element.setAttribute("value", type);
            element.setAttribute("name", type);

            label.appendChild(element);
            label.innerHTML += text;

            var foo = document.getElementById("fooBar");
            //Append the element in page (in span).
            foo.appendChild(label);
            counter = counter + 1;
        }
        addradiobutton("radio", "Water");
</script>