如何避免JS文本输入框在添加新输入时内容被重置？

你猜的没错，用innerHTML +=拼接内容时，浏览器会把容器里的现有元素先转换成HTML字符串，再和新内容拼接，最后重新解析渲染整个容器的内容——这就相当于把原来的输入框都删了再重新创建一遍，自然会丢失之前输入的内容。

给你两种简单有效的解决方法：

方法一：用DOM API创建并添加元素 #

直接创建新的<br>和<input>节点，再追加到容器里，完全不影响原有元素：

document.getElementById("add").onclick = function(){
  // 创建换行标签
  const lineBreak = document.createElement('br');
  // 创建输入框
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.spellcheck = false;
  newInput.id = `b${nBox}`;
  newInput.className = 'eq';

  // 把元素添加到容器末尾
  const boxesContainer = document.getElementById("boxes");
  boxesContainer.appendChild(lineBreak);
  boxesContainer.appendChild(newInput);

  // 别忘了自增nBox，避免id重复
  nBox++;
}

方法二：用insertAdjacentHTML插入内容 #

这个方法可以在指定位置插入HTML片段，不会重新渲染整个容器，只会新增内容：

document.getElementById("add").onclick = function(){
  const boxesContainer = document.getElementById("boxes");
  // 在容器末尾插入新的HTML
  boxesContainer.insertAdjacentHTML('beforeend', `<br/><input type="text" spellcheck="false" id="b${nBox}" class="eq"/>`);
  nBox++;
}

两种方法都能保留之前输入框的内容，选哪种看你习惯就行，记得保证nBox每次点击都自增，不然新输入框的id会重复。

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