Adding Label to Dynamically Created HTML Input

Question

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.

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?

Have a look at jQuery, it's working more easy with creating elements and setting attributes. — Pieter
– Pieter, Commented Jul 22, 2013 at 17:33
@sreisman Consider try jQuery, as Pieter said. With your code you may caught on JavaScript Cross-Browser issues, mainly on IE. — DontVoteMeDown
– DontVoteMeDown, Commented Jul 22, 2013 at 17:48

DontVoteMeDown · Accepted Answer · 2013-07-22 17:33:10Z

5

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.

answered Jul 22, 2013 at 17:33

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding Label to Dynamically Created HTML Input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related