为html表单创建输入字段...但也为它添加“标签”？

Question

I have an html form. 我有一个HTML表单。 When you click the button, a javascript function adds a new field. 单击该按钮时，javascript函数会添加一个新字段。 I'm trying to have the function also add a 'label' for the field as well. 我正在尝试让该功能也为该字段添加“标签”。

I've tried using document.createElement("LABEL"), but that doesn't let me change the innerHtml (or maybe I'm doing it wrong..), nor add a closing 我已经尝试过使用document.createElement（“LABEL”），但这不允许我更改innerHtml（或者我可能做错了..），也没有添加结束

Here is my code. 这是我的代码。 Thanks! 谢谢！ var instance = 2; var instance = 2;

        function newTextBox(element)
        {       
            instance++; 
            // Create new input field
            var newInput = document.createElement("INPUT");
            newInput.id = "text" + instance;
            newInput.name = "text" + instance;
            newInput.type = "text";
            instance++; 

            document.body.insertBefore(document.createElement("BR"), element);
            document.body.insertBefore(newInput, element);

        }
    </script>
</head>


<body>
    <LABEL for="text1">First name: </LABEL>
    <input id="text1" type="text" name="text1">
    <LABEL for="text2">Last name: </LABEL>
    <input id="text2" type="text" name="text2">



    <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>

Answer 1

The example from Vincent does not work. 文森特的例子不起作用。

Try this: 试试这个：

var newlabel = document.createElement("Label");
    newlabel.setAttribute("for",id_from_input);
    newlabel.innerHTML = "Here goes the text";
parentDiv.appendChild(newlabel);

Answer 2

   function newTextBox(element)
            {               
                    instance++; 
                    // Create new input field
                    var newInput = document.createElement("INPUT");
                    newInput.id = "text" + instance;
                    newInput.name = "text" + instance;
                    newInput.type = "text";

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

                    label.htmlFor = "text" + instance;
                    label.innerHTML="Hello";
                    instance++; 

                    document.body.insertBefore(document.createElement("BR"), element);
                    document.body.insertBefore(newInput,element);
                    document.body.insertBefore(label, newInput);

Note that for attribute of the label tag, corresponds to the property htmlFor fo the label object in javascript 请注意，对于 label标签的属性，对应于javascript中标签对象的属性htmlFor

Answer 3

<div id="somediv">
 some div
</div>

<script>

var instance = 0;

function newTextBox(element){               

instance++; 
// Create new input field
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";

var newlabel = document.createElement("Label");
newlabel.setAttribute("for","text" + instance);
newlabel.innerHTML = "Here goes the text";
document.getElementById("somediv").appendChild(newlabel);
document.getElementById("somediv").appendChild(newInput);
}

</script>

为html表单创建输入字段...但也为它添加“标签”？

问题描述

3 个解决方案

解决方案1
8 2012-02-07 21:13:21

解决方案2
7 已采纳 2009-12-23 06:10:53

解决方案3
0 2012-11-21 18:04:35

为html表单创建输入字段...但也为它添加“标签”？

问题描述

3 个解决方案

解决方案1 8 2012-02-07 21:13:21

解决方案2 7 已采纳 2009-12-23 06:10:53

解决方案3 0 2012-11-21 18:04:35

解决方案1
8 2012-02-07 21:13:21

解决方案2
7 已采纳 2009-12-23 06:10:53

解决方案3
0 2012-11-21 18:04:35