JS中向对象（非数组）添加元素及表单数据显示不被覆盖问题求助

问题出在你每次提交时直接用innerHTML =覆盖了原有内容，而且没有保存历史数据。正确的做法是用数组存储所有提交的条目，每次新增后重新渲染全部内容，或者在原有内容后追加。

方案一：用数组管理所有条目（推荐） #

这种方式能更好地维护数据，方便后续修改、删除等操作：

// 定义全局数组存储所有条目
let itemsList = [];

class Items {
  constructor(namee, surnamee) {
    this.namee = namee;
    this.surnamee = surnamee;
  }
}

function Func(event) {
  // 传入event参数，避免依赖全局event对象
  event.preventDefault();
  var nameval = document.getElementById('namee').value;
  var surnval = document.getElementById('surnamee').value;

  // 清空输入框，提升用户体验
  document.getElementById('namee').value = '';
  document.getElementById('surnamee').value = '';

  let newIt = new Items(nameval, surnval);
  // 把新条目加入数组
  itemsList.push(newIt);
  
  // 渲染所有条目
  renderItems();
}

function renderItems() {
  const box = document.getElementById('box');
  // 遍历数组生成内容，用换行标签区分每条数据
  box.innerHTML = itemsList.map(item => `${item.namee} ${item.surnamee}`).join('<br>');
}

<form onsubmit="Func(event)"> 
  <input id="namee" placeholder="姓名">
  <input id="surnamee" placeholder="姓氏">
  <button type="submit">发送</button>
</form>
<p id="box"></p>

方案二：直接追加内容（快速解决） #

如果只是想快速实现追加效果，不用数组管理数据，可以把innerHTML =改成innerHTML +=，同时添加分隔符区分条目：

class Items {
  constructor(namee, surnamee) {
    this.namee = namee;
    this.surnamee = surnamee;
  }
}

function Func(event) {
  event.preventDefault();
  var nameval = document.getElementById('namee').value;
  var surnval = document.getElementById('surnamee').value;

  document.getElementById('namee').value = '';
  document.getElementById('surnamee').value = '';

  let newIt = new Items(nameval, surnval);
  // 用+=追加内容，加上<br>实现换行
  document.getElementById('box').innerHTML += `${newIt.namee} ${newIt.surnamee}<br>`;
}

关键说明 #

• 方案一用数组管理数据是更规范的前端开发方式，后续如果需要对条目做编辑、删除等操作，会更灵活。
• 两种方案都加入了清空输入框的逻辑，优化用户操作体验。
• 注意把原代码里的onsubmit={Func()}改成onsubmit="Func(event)"，避免页面加载时就执行函数，同时正确传递事件对象阻止表单默认提交行为。

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