Как разместить добавленные элементы в DOM по одному в строке

Question

У меня есть эти поля.

При нажатии на кнопку «Добавить», я пустошь, как сделать добавить новый InputBox под другой.

Код:

var newWaypoint = document.createElement("INPUT"); 
newWaypoint.setAttribute("type", "text"); 
newWaypoint.setAttribute("class", "waypoints-field"); 
newWaypoint.setAttribute("id", "waypoint"+i); 
document.getElementById("addressbox").appendChild(newWaypoint); 
i++; 

В первый раз, он отлично работает, но после того, как следующий результат щелчка является:

Как я могу держать каждый вход на отдельной строке?

Answer 1

Вы можете попробовать:

newWaypoint.style.display = 'block'; 

Таким образом, вы добавить стиль программно через код, а не его сцепления с внешним файлом CSS.

Answer 2

Пожалуйста, попробуйте следующее: -

Добавляет новую строку перед каждым текстовым полем.

var newWaypoint = document.createElement("INPUT"); 
newWaypoint.setAttribute("type", "text"); 
newWaypoint.setAttribute("class", "waypoints-field"); 
newWaypoint.setAttribute("id", "waypoint"+i); 
document.getElementById("addressbox").appendChild("br"); 
document.getElementById("addressbox").appendChild(newWaypoint); 
i++;