Javascript 为 html 表单创建输入字段...但也要为其添加“标签”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1950939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
creating input field for html form... but adding a 'label' for it as well?
提问by Matt
I have an html form. When you click the button, a javascript function adds a new field. I'm trying to have the function also add a 'label' for the field as well.
我有一个 html 表单。当您单击该按钮时，一个 javascript 函数会添加一个新字段。我试图让该功能也为该字段添加一个“标签”。
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;
这是我的代码。谢谢！变量实例 = 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>
采纳答案by Vincent Ramdhanie
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 forattribute of the label tag, corresponds to the property htmlForfo the label object in javascript
回答by Dinkheller
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);
回答by KDawg
<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>
