Добавление текстового поля одним нажатием кнопки с javascript

Question

Ниже у меня есть javascript и html, которые у меня есть в моем проекте. Я хочу, чтобы текстовое поле ввода, похожее на первое в html-коде, появилось прямо под ним после нажатия кнопки «ADD».

В настоящее время появляются добавленные текстовые поля, но они отображаются под кнопкой «Добавить», и они отображаются рядом друг с другом не под друг друга.

<script>  
    function add_field() 
    { 
     var form = document.getElementsByTagName('form')[0], 
     input = document.createElement('input'); 
     input.setAttribute('type', 'text'); 
     input.setAttribute('name', 'item'); 
     form.appendChild(input); 
    }; 
</script> 
<form name="input" method="get"> 
    <div class="ui-input-text"> 
     <input type="text" name="item"><br> 
     <div data-role="navbar"> 
      <button type="button" onclick="add_field()">ADD</button><br> 
     </div> 
    </div> 
</form> 

Answer 1

Это простая демонстрация, которая добивается того, чего вы ищете:

<form name="input" method="get"> 
    <input type="text" name="item"> 
</form> 
<button type="button" onclick="add_field()">ADD</button> 

Css:

input { 
    display: block; 
} 

Некоторые полезные замечания:

Не используйте <br> для промежуточных элементов. Вместо этого используйте стили css, такие как display: block и margin.

Инлайн JS (как onlick в вашем HTML) может иметь некоторые неприятные побочные эффекты, и это не очень хорошая практика для многих причин, прочитать некоторые из этих результатов: https://www.google.com/search?q=Why+is+inline+js+bad%3F

Вместо встроенных JS, вы могли бы сделать это:

//get button reference 
var myBtn = document.getElementById('myBtn'); 

//add click function 
myBtn.addEventListener('click', function(event) { 
    addField(); 
}); 

Вы в своей форме некоторые div теги, которые закрывают снаружи формы. Если элемент начинается внутри другого элемента, обязательно закройте его перед закрытием родительского элемента.

Вот демо всего этого: http://jsbin.com/igoVoTEr/1/edit

Если вам нужна кнопка, чтобы быть внутри формы, вы можете вставить входы перед ним, как это:

function addField() { 
    var input = document.createElement('input'); 
    //insert before the button 
    form.insertBefore(input, myBtn); 
} 

Демо-версия здесь: http://jsbin.com/igoVoTEr/2/edit