Javascript 如何将添加的元素每行放置一个到DOM中

我有这些字段

当我点击“添加”按钮时，我想在“其他”下添加新的输入框

代码：

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

第一次工作正常，但下一次单击后，结果是：

如何将每个输入保持在单独的行上？

您可以尝试：

newWaypoint.style.display = 'block';

通过这种方式，您可以通过代码以编程方式添加样式，而不是将其与外部CSS文件耦合

请尝试以下操作：-

在每个文本框前追加一行

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

---

只需在CSST中将

input

设置为

display:block

，这不是一个最佳解决方案，谢谢，它可以工作。现在我有另一个问题。我想在每个添加的输入中添加按钮。示例：您只需创建一个新的button元素并将其附加到输入之后。如果您希望从示例中获得特定的外观，那么最好使用CSS进行样式设置。