Question

我正在创建一个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">节点？

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

Answer 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++;
}

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

2 个答案: