向动态创建的 HTML 输入添加标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17793695/
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
Adding Label to Dynamically Created HTML Input
提问by sreisman
I think I am missing something in my fundamental understanding of creating dynamic HTML elements with javascript. After trying many of the examples I have found online to similar issues I have decided to post my question. I have a JS function which dynamically creates three input forms but I want to label each of the input boxes.
我想我在使用 javascript 创建动态 HTML 元素的基本理解中缺少一些东西。在尝试了许多我在网上找到的类似问题的示例后，我决定发布我的问题。我有一个动态创建三个输入表单的 JS 函数，但我想标记每个输入框。
function newItem(){
instance++;
var oldInput = document.getElementById("itemInfo");
var parent = oldInput.parentNode;
var newDiv = document.createElement("div");
var item = document.createElement("INPUT");
var qty = document.createElement("INPUT");
var color = document.createElement("INPUT");
item.name = "item" + instance;
item.value = "Enter Item";
qty.name = "qty" + instance;
qty.value = "Enter Qty";
color.name = "color" + instance;
color.value = "Enter Color";
newDiv.appendChild(item);
newDiv.appendChild(qty);
newDiv.appendChild(color);
p = qty.parentNode;
var itemLabel = document.createElement("Label");
itemLabel.setAttribute("for", item);
itemLabel.innerHTML = "Item: ";
newDiv.insertBefore(itemLabel, item);
var qtyLabel = document.createElement("Label");
qtyLabel.setAttribute("for", qty);
qtyLabel.innerHTML = "Qty: ");
document.body.appendChild(qtyLabel, qty);
var colorLabel = document.createElement("Label");
colorLabel.setAttribute("for", color);
colorLabel.innerHTML = "Color: ");
color.appendChild(colorLabel);
parent.insertBefore(newDiv, oldInput);
}
If I comment out as follows I am able to correctly only the first input box:
如果我如下注释掉，我只能正确输入第一个输入框：
var itemLabel = document.createElement("Label");
itemLabel.setAttribute("for", item);
itemLabel.innerHTML = "Item: ";
newDiv.insertBefore(itemLabel, item);
// var qtyLabel = document.createElement("Label");
// qtyLabel.setAttribute("for", qty);
// qtyLabel.innerHTML = "Qty: ");
// document.body.appendChild(qtyLabel, qty);
// var colorLabel = document.createElement("Label");
// colorLabel.setAttribute("for", color);
// colorLabel.innerHTML = "Color: ");
// color.appendChild(colorLabel);
However, if I uncomment either of the bottom two in an attempt to label the second and third input boxes, clicking the button with the newItem() function action does not create any additional input forms. How can I dynamically create the forms with their respective labels?
但是，如果我取消注释底部两个中的任何一个以尝试标记第二个和第三个输入框，则单击带有 newItem() 函数操作的按钮不会创建任何其他输入表单。如何使用各自的标签动态创建表单？
回答by DontVoteMeDown
You have a syntax error on these lines:
您在这些行上有语法错误：
qtyLabel.innerHTML = "Qty: ");
colorLabel.innerHTML = "Color: ");
Just alter to this:
只需更改为：
qtyLabel.innerHTML = "Qty: ";
colorLabel.innerHTML = "Color: ";
Maybe because of this it works when you comment them.
也许正因为如此，当您评论它们时它会起作用。
