javascript - 向动态创建的 HTML 输入添加标签

Question

我认为我对使用 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);

}

如果我如下注释，我只能正确输入第一个输入框:

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

但是，如果我取消注释底部两个中的任何一个以尝试标记第二个和第三个输入框，则单击具有 newItem() 函数操作的按钮不会创建任何其他输入表单。如何动态创建带有各自标签的表单？

Answer 1

您在这些行上有语法错误:

qtyLabel.innerHTML = "Qty: ");
colorLabel.innerHTML = "Color: ");

只需更改为:

qtyLabel.innerHTML = "Qty: ";
colorLabel.innerHTML = "Color: ";

也许正因为如此，当您评论它们时它才起作用。