How do I generate a list of textboxes in JavaScript?

Question

I'm making a JS application that automatically another textbox on user input. I'm not however sure how I append an input to a li

The end result I want to get at is this:

<ul id="lst">
  <li>Item1: <input type="text"></li>
  <li>Item2: <input type="text"></li>
  <!-- more li added on button press -->
</ul>

what I got so far is this:

var onClick = function() {
  var ul = document.getElementById('lst'),
      li = document.createElement('li');
  li.appendChild(document.createTextNode('Item' + counter + ': '));
  counter++;
  ul.appendChild(li);
}

How do I also append the <input type="text"> node?

I think this is what you are looking for: stackoverflow.com/a/5656401/4298881. Construct a input node and append it after you append the Item — Surely
– Surely, Commented Aug 19, 2015 at 17:23

Schleis · Accepted Answer · 2015-08-19 17:23:50Z

1

The same way you added the text to the element.

var onClick = function() {
  var ul = document.getElementById('lst'),
      li = document.createElement('li'),
      input = document.createElement('input');
  input.type="text";
  li.appendChild(document.createTextNode('Item' + counter + ': '));
  li.appendChild(input);
  counter++;
  ul.appendChild(li);
}

answered Aug 19, 2015 at 17:23

Schleis

44.2k8 gold badges73 silver badges90 bronze badges

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

Comments

tymeJV · Accepted Answer · 2015-08-19 17:23:50Z

0

It's probably easier to use a label element as well, and append that along with an input

var onClick = function() {
    var ul    = document.getElementById('lst'),
        li    = document.createElement('li'),
        label = document.createElement('label'),
        input = document.createElement('input');

    label.text = "Item " + counter + ":";
    li.appendChild(label);
    //input.type = "text";
    li.appendChild(input); //defaults to type text
    ul.appendChild(li);

    counter++;
}

answered Aug 19, 2015 at 17:23

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Collectives™ on Stack Overflow

How do I generate a list of textboxes in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related