如何用原生JavaScript点击按钮添加输入元素并实现数据同步

嘿，这个问题我之前也踩过坑！用全局数组存数据确实会碰到DOM修改后数组没法同步的麻烦，因为数组里的数据和页面上的元素是完全脱节的。给你两个更靠谱的解决方案，优先推荐第一个：

不用额外维护数组，每次要向后端发数据时，直接从页面上的所有输入元素里收集最新值就行。这样DOM和数据天然同步，用户修改任何已添加的输入框或选择框，收集到的数据都是最新的，完全不存在同步问题。

实现步骤： #

• 给每个新增的「输入框+选择框」组合加一个统一的类（比如data-group），方便批量获取
• 点击添加按钮时，直接创建新的DOM元素组插入页面，不用存到数组里
• 提交数据时，遍历所有data-group，读取每组的输入值组装成数组

完整代码示例：

<!-- 调整HTML结构，给容器加id，初始组加统一类 -->
<div class="myDiv" id="dataContainer">
  <div class="data-group">
    <input type="text" id="inputData" name="selectOption">
    <select id="optionData">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>
<input type="button" value="Add element" onclick="AddElement()">

function AddElement() {
  // 创建新的输入组容器
  const newGroup = document.createElement('div');
  newGroup.className = 'data-group';

  // 创建新的输入框
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'selectOption';
  // 可以把初始输入框的值带过来，也可以留空
  newInput.value = document.getElementById('inputData').value;

  // 创建新的选择框，复制初始的选项
  const newSelect = document.createElement('select');
  newSelect.innerHTML = document.getElementById('optionData').innerHTML;
  newSelect.value = document.getElementById('optionData').value;

  // 把输入框和选择框加到新组里，再插入页面容器
  newGroup.appendChild(newInput);
  newGroup.appendChild(newSelect);
  document.getElementById('dataContainer').appendChild(newGroup);

  // 清空初始输入框和选择框的值
  document.getElementById('inputData').value = '';
  document.getElementById('optionData').value = 'volvo';
}

// 需要提交数据时调用这个函数
function collectDataForSubmit() {
  // 获取所有输入组
  const allGroups = document.querySelectorAll('.data-group');
  // 遍历组装成数据数组
  const submitData = Array.from(allGroups).map(group => {
    const input = group.querySelector('input');
    const select = group.querySelector('select');
    return {
      inputData: input.value,
      optionData: select.value
    };
  });

  // 这里就可以把submitData发给后端了
  console.log('要提交的数据：', submitData);
  return submitData;
}

这个方案的优势在于完全没有同步逻辑，代码简洁，也不容易出错——毕竟页面上的内容就是用户真实修改后的结果，直接取就行。

如果因为某些业务需求，必须在内存中维护这个数组，那可以给每个新增的DOM元素绑定一个指向数组对应项的索引，然后监听输入/选择事件，实时更新数组里的数据。

代码示例：

// 全局数组，现在会和DOM同步更新
let elements = [];

function AddElement() {
  const inputVal = document.getElementById("inputData").value;
  const selectVal = document.getElementById("optionData").value;
  
  // 创建数据对象并加入数组
  const newData = { inputData: inputVal, optionData: selectVal };
  const dataIndex = elements.length;
  elements.push(newData);

  // 创建新的输入组
  const newGroup = document.createElement('div');
  newGroup.className = 'data-group';

  // 输入框：绑定索引，监听input事件更新数组
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = inputVal;
  newInput.dataset.dataIndex = dataIndex;
  newInput.addEventListener('input', function() {
    elements[parseInt(this.dataset.dataIndex)].inputData = this.value;
  });

  // 选择框：绑定索引，监听change事件更新数组
  const newSelect = document.createElement('select');
  newSelect.innerHTML = document.getElementById('optionData').innerHTML;
  newSelect.value = selectVal;
  newSelect.dataset.dataIndex = dataIndex;
  newSelect.addEventListener('change', function() {
    elements[parseInt(this.dataset.dataIndex)].optionData = this.value;
  });

  // 插入页面
  newGroup.appendChild(newInput);
  newGroup.appendChild(newSelect);
  document.getElementById('dataContainer').appendChild(newGroup);

  // 清空初始输入
  document.getElementById("inputData").value = '';
  document.getElementById("optionData").value = 'volvo';
}

这个方案能保证数组和DOM实时同步，但需要写额外的事件监听代码，复杂度比方案1高一些，所以除非必要，优先选方案1。

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