javascript - 表单对象中的换行符

Question

如果这是重复的帖子，请告诉我，但我找不到解决我的问题的方法。它必须是简单的东西......

我正在尝试使用 javascript 构建表单。表单的 html 如下:

<form>
  Time: <input type="time"> <br>
  Performer: <input type="text"><br>
  Link: <input type="text"><br>
  <input type="submit" value="Submit">
</form>

我想做的是使用 javascript 构建这个精确的表单，但所有元素都显示在同一行上。这是我的 javascript 函数:

function addPerformance(){
var brk = document.createElement("br");
var form = document.createElement("form");

//create time element
var time = document.createElement("input");
time.setAttribute("type", "time");
form.appendChild(time);
form.appendChild(brk);

//create perfomer element
var perf = document.createElement("input");
perf.setAttribute("type", "text");
form.appendChild(perf);
form.appendChild(brk);

//create link element
var link = document.createElement("input");
link.setAttribute("type", "text");
form.appendChild(link);
form.appendChild(brk);

//create submit element
var sub = document.createElement("input");
sub.setAttribute("type", "submit");
sub.setAttribute("value", "Submit");
form.appendChild(sub);
form.appendChild(brk);

document.body.appendChild(form);
}

“form.appendChild(brk)”是我认为会像在 html 示例中那样添加那些换行符的内容，但它不起作用。最终，我只希望表单的每个元素都在一个列中。任何帮助将不胜感激，谢谢!

Answer 1

当您第二次调用 form.appendChild(brk); 时，它会将 brk 引用的 HTMLElement 从它所在的位置移动到新职位；即从一开始就将其删除。

改为附加克隆

 form.appendChild(brk.cloneNode());