如何实现点击表单内+按钮动态新增文本输入框

可直接使用的修改方案 #

你可以直接替换现有<script>标签内的全部代码为以下内容，即可实现点击+按钮在按钮上方新增输入框的需求：

// 初始化计数器：自动统计现有输入框数量，避免和已有字段名重复
var counter = document.querySelectorAll('.question-box').length;
var addqbtn = document.getElementById('addqbtn');

// 绑定点击事件
addqbtn.addEventListener('click', function() {
  counter++;
  // 创建输入框，参数和原有输入框保持一致
  var input = document.createElement("input");
  input.id = 'additionalquestion-' + counter;
  input.type = 'text';
  input.className = 'question-box';
  input.name = counter;
  input.placeholder = 'Write your question in here.';
  input.maxLength = 255;
  input.size = 70;
  // 创建换行符，和原有样式统一
  var br = document.createElement('br');
  
  // 插入到+按钮的上方位置
  addqbtn.parentNode.insertBefore(input, addqbtn);
  addqbtn.parentNode.insertBefore(br, addqbtn);
});

核心修改说明 #

• 移除了未调用的外层addquestion函数，页面加载后直接绑定点击事件，避免点击无反应
• 用insertBefore方法替代原有的appendChild，将新增元素直接插入到+按钮节点之前，符合位置要求
• 修正了类名设置属性：JS中设置元素类名需使用className而非class，保证原有输入框样式正常生效
• 新增输入框的name属性按数字递加，和PHP渲染的原有输入框命名逻辑完全一致，后端接收表单时不会出现字段冲突
• 自动统计现有输入框数量作为计数器初始值，不需要额外传递后端参数即可避免字段名重复
• 新增对应换行标签，和原有输入框的排版保持一致

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