Как создать список текстовых полей в JavaScript?

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