表格对象中的换行符

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);第二次调用时,它会将HTMLElement引用的brk位置移动到新位置; 即从第一个地方删除它.

添加克隆代替

 form.appendChild(brk.cloneNode());