追加された要素を1行に1つずつDOMに配置する方法

Question

私はこれらのフィールドを持っています。他の下に新しい入力ボックスを追加行うよう

私は、「追加」ボタンをクリックし

は、私がウォルド。

コード：

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

あなたは試みることができる：あなたは、むしろ外部CSSファイルでそれを結合するよりも、コードをプログラム的にスタイルを追加

newWaypoint.style.display = 'block'; 

その方法。

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