点击按钮添加输入框时原有输入内容丢失问题排查与解决

嘿，我来帮你搞定这个问题！

问题出在哪？ #

你遇到的核心问题是使用了div.innerHTML来添加新的输入框元素——这个方法会完全替换掉#participant容器内的所有现有内容，相当于把原来的输入框、按钮等元素全部删除，再重新生成新的内容。原有输入框里的文本属于元素的状态，自然会跟着被清空。

修复方法 #

方案1：用原生DOM方法创建并添加元素（推荐） #

这种方式不会破坏容器内的已有元素，能完整保留输入框的内容：

var div = document.getElementById('participant');
function AjoutParticipant() {
  // 隐藏所有已有的加号按钮
  var ex = document.getElementsByClassName("bouton_plus");
  for (let i = 0; i < ex.length; i++) {
    ex[i].style.display = "none";
  }
  
  // 创建新的输入框（可根据你的需求调整属性，比如type、class、placeholder等）
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.className = 'participant-input';
  newInput.placeholder = '输入参与者信息';
  
  // 创建新的加号按钮
  const newBtn = document.createElement('button');
  newBtn.className = 'bouton_plus';
  newBtn.textContent = '+ 添加参与者';
  newBtn.onclick = AjoutParticipant;
  
  // 将新元素追加到容器末尾，完全不影响原有内容
  div.appendChild(newInput);
  div.appendChild(newBtn);
}

方案2：用insertAdjacentHTML插入HTML字符串 #

如果你更习惯用HTML字符串来构建内容，可以用这个方法——它会在指定位置插入新HTML，不会替换原有内容：

var div = document.getElementById('participant');
function AjoutParticipant() {
  var ex = document.getElementsByClassName("bouton_plus");
  for (let i = 0; i < ex.length; i++) {
    ex[i].style.display = "none";
  }
  
  // 这里替换成你原本要通过innerHTML添加的HTML内容
  const newContent = `
    <input type="text" class="participant-input" placeholder="输入参与者信息" />
    <button class="bouton_plus" onclick="AjoutParticipant()">+ 添加参与者</button>
  `;
  
  // 在容器的末尾插入新内容
  div.insertAdjacentHTML('beforeend', newContent);
}

额外优化提示 #

循环里的i建议用let而不是var，避免因变量提升导致的闭包问题，让代码更健壮。

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