如何在 JavaScript 中生成文本框列表？答案

【问题标题】：How do I generate a list of textboxes in JavaScript?如何在 JavaScript 中生成文本框列表？
【发布时间】：2015-11-13 03:00:08
【问题描述】：

我正在制作一个 JS 应用程序，它会在用户输入时自动生成另一个文本框。但是我不确定如何将input 附加到li

我想要得到的最终结果是这样的：

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

到目前为止我得到的是：

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

如何还附加<input type="text"> 节点？

【问题讨论】：

我想这就是你要找的东西：stackoverflow.com/a/5656401/4298881。构造一个输入节点并在追加项目后追加它

标签： javascript

【解决方案1】：

与将文本添加到元素的方式相同。

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

【讨论】：

【解决方案2】：

使用label 元素可能更容易，并将其与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++;
}

【讨论】：