如何实现点击按钮多次生成input输入框？

问题很明确——你现在的代码每次点击都会覆盖容器里的内容，而不是添加新的输入框。根源就在这行代码：

container.innerHTML = "<input type='text'/>";

innerHTML = 会把容器内原有内容全部替换成新的HTML，所以不管点多少次，永远只有最后一次生成的输入框。下面给你几种解决方案，从快速修改到Vue最佳实践都有：

方案1：快速修改——追加内容而非替换 #

把赋值运算符=改成+=，这样就能在原有内容后面追加新的输入框了：

createNewInputFields() {
  var container = document.getElementById('new-input-container')
  container.innerHTML += "<input type='text'/>";
}

这种方式最简单，但如果后续需要给输入框绑定事件或者处理复杂逻辑，可能会有潜在问题（比如重复绑定），适合简单场景。

方案2：规范DOM操作——创建元素并追加 #

更推荐用原生DOM的创建和追加方法，这种方式更安全灵活，方便后续扩展：

createNewInputFields() {
  var container = document.getElementById('new-input-container')
  // 创建新的输入框元素
  const newInput = document.createElement('input');
  newInput.type = 'text';
  // 可以在这里添加属性，比如占位符、类名
  newInput.placeholder = '请输入内容';
  newInput.classList.add('custom-input');
  // 把新输入框追加到容器里
  container.appendChild(newInput);
}

方案3：Vue最佳实践——用响应式数据管理（推荐） #

从你的代码里看到了@click指令，说明这是Vue项目。Vue的核心是响应式数据，直接操作DOM其实不符合它的设计理念，咱们用响应式数组来管理输入框数量会更优雅：

修改HTML模板 #

<div id="new-input-container">
  <!-- 用v-for循环渲染输入框，key值保证唯一性 -->
  <input type="text" v-for="(item, index) in inputList" :key="index" placeholder="新输入框"/>
</div>
<p class="add-new-shareholders-p">
  <i class="fa fa-plus-circle fa-lg" @click="createNewInputFields"/>
</p>

修改Vue组件的data和方法 #

export default {
  data() {
    return {
      inputList: [] // 用数组来记录需要渲染的输入框数量
    }
  },
  methods: {
    createNewInputFields() {
      // 每次点击往数组里新增一个元素，v-for会自动渲染新的输入框
      this.inputList.push({});
      // 如果需要给每个输入框绑定独立的数据，也可以在这里初始化，比如：
      // this.inputList.push({ value: '' });
    }
  }
}

这种方式的好处是：不需要手动操作DOM，后续要获取所有输入框的值时，直接遍历inputList就能拿到；而且Vue会帮你高效管理DOM的创建和销毁，避免手动操作可能带来的问题。

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