javascript - 使用 JavaScript 制作 HTML 表单时新行不起作用

Question

我正在使用以下代码使用 JavaScript 制作 html5 表单。

newLine = document.createElement("br");
var optionsForm = document.createElement("form");
optionsForm.setAttribute('method',"post");
optionsForm.setAttribute('action',"submit.php");
var selectColor = document.createElement("select"); //input element, drop-down
selectColor.setAttribute('type',"select");
selectColor.setAttribute('name',"colorMenu");
selectColor.setAttribute('id',"colorMenuID");

// Populate drop-down menu
var option = document.createElement("option");
option.text = "Select Color:";
option.value = "selectColor";
selectColor.appendChild(option);

optionsForm.appendChild(selectColor);
optionsForm.appendChild(newLine);

但是，当我制作新的下拉菜单时，它与旧的在同一行。附加 newLine 元素似乎没有任何效果。

Answer 1

I figured out how to do it.

var menuElement = document.createElement("div");
label = document.createTextNode("Label: ");
menuElement .appendChild(label);
var selectMenu = document.createElement("select"); 
selectMenu.setAttribute('type',"select");
selectMenu.setAttribute('name',"menuName");
selectMenu.setAttribute('id',"menuID");
menuElement.appendChild(selectMenu);

Then I add some options then

menuElement.appendChild(newLine);
optionsForm.appendChild(menuElement);