表单新增输入项无法自动换行：element.appendChild插入<br>失效

嗨，我来帮你搞定这个换行的问题！你遇到的核心问题是新增输入框时，没能像现有三个那样自动换行，大概率是<br>元素的创建或插入环节出了小差错，咱们一步步来解决：

1. 先把<br>的插入逻辑捋顺 #

现有输入框能换行，是因为每个输入框后面都跟着一个<br>标签。所以新增时必须确保每个新输入框之后，都正确插入一个<br>节点。很多时候问题出在创建<br>的方式不对，或者插入顺序错了。

给你一个能正常工作的示例函数：

function addNewInput() {
  // 获取存放输入框的容器
  const referenceDiv = document.getElementById('reference');
  
  // 创建新的输入框
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'refer[]';
  newInput.placeholder = 'Enter reference detail';
  newInput.size = 40;
  
  // 正确创建换行元素
  const lineBreak = document.createElement('br');
  
  // 先插输入框，再插换行——顺序别搞反！
  referenceDiv.appendChild(newInput);
  referenceDiv.appendChild(lineBreak);
}

2. 排查CSS的潜在干扰 #

如果上面的代码还是没生效，检查一下有没有CSS规则让input变成了display: inline-block或者float: left这类会强制元素并排的样式。如果有，要么修改CSS，要么换个更现代的布局方式：

#reference input {
  display: block; /* 让每个输入框单独占一行，不用<br>也能换行 */
  margin-bottom: 10px; /* 可选：增加输入框之间的间距 */
}

用这种方式的话，甚至可以完全不用<br>标签，布局更灵活。

3. 顺便提个小坑：现有HTML的id重复了 #

你现有代码里三个input都用了id='company'，这不符合HTML规范哦——id必须是页面唯一的。虽然这不是换行的直接原因，但后续用JS操作这些元素时肯定会出问题，建议改成class或者直接去掉重复的id。

内容的提问来源于stack exchange，提问作者Gagandeep