如何使用VanillaJS实现点击按钮新增div卡片并保留历史数据

你遇到的核心问题是替换了容器内容而非追加——原来的代码用innerHTML =直接覆盖了#mentees里的所有内容，所以每次添加新学员时旧的卡片就没了。用Vanilla JS完全可以实现保留旧数据的需求，下面给你两种可行方案：

方案1：用innerHTML +=快速实现追加 #

这种方式简单直接，只需要修改addMentee函数，把赋值操作改成累加，同时把每个学员的信息包裹在独立的卡片div中：

function newMentee() {
  document.getElementById('new-mentee-form').style.display="block";
  document.getElementById('mentees').style.display="block"; // 保持列表可见，不用隐藏
}

function addMentee() {
  document.getElementById('new-mentee-form').style.display="none";
  
  // 获取用户输入的信息
  const name = document.getElementById('name').value.trim();
  const rating = document.getElementById('rating').value.trim();
  const comments = document.getElementById('comments').value.trim();
  
  // 跳过空输入（可选，避免创建空卡片）
  if (!name) return;
  
  // 构建单个学员的卡片HTML结构
  const menteeCard = `
    <div class="mentee-card">
      <strong>Name: ${name}</strong><br><br>
      Rating: ${rating}<br><br>
      Comments: ${comments}
    </div>
  `;
  
  // 追加到容器中，而非替换原有内容
  document.getElementById('mentees').innerHTML += menteeCard;
  
  // 清空表单，方便下次输入
  document.getElementById('name').value = '';
  document.getElementById('rating').value = '';
  document.getElementById('comments').value = '';
}

然后在CSS里添加卡片的样式（把原来写在JS里的样式移到CSS，更符合规范）：

#mentees {
  margin-top: 3em;
  overflow: hidden; /* 清除浮动，防止容器高度塌陷 */
}

.mentee-card {
  background-color: black;
  width: 10em;
  min-height: 10em; /* 用min-height适配内容高度 */
  margin: 0 2em 2em 2em;
  padding: 2em;
  border-radius: 2em;
  word-wrap: break-word;
  color: white;
  float: left; /* 让卡片横向排列，可选 */
}

方案2：更安全的DOM元素创建方式（推荐） #

如果担心用户输入包含特殊字符（比如<、&）导致格式问题或XSS风险，推荐用原生DOM API创建元素，这种方式更安全可靠：

function addMentee() {
  document.getElementById('new-mentee-form').style.display="none";
  
  const name = document.getElementById('name').value.trim();
  const rating = document.getElementById('rating').value.trim();
  const comments = document.getElementById('comments').value.trim();
  
  if (!name) return;
  
  // 创建卡片容器
  const card = document.createElement('div');
  card.classList.add('mentee-card');
  
  // 创建并添加各个内容节点
  const nameEl = document.createElement('strong');
  nameEl.textContent = `Name: ${name}`;
  
  const ratingEl = document.createElement('p');
  ratingEl.textContent = `Rating: ${rating}`;
  
  const commentsEl = document.createElement('p');
  commentsEl.textContent = `Comments: ${comments}`;
  
  // 组装卡片内容
  card.appendChild(nameEl);
  card.appendChild(document.createElement('br'));
  card.appendChild(document.createElement('br'));
  card.appendChild(ratingEl);
  card.appendChild(document.createElement('br'));
  card.appendChild(document.createElement('br'));
  card.appendChild(commentsEl);
  
  // 把卡片追加到学员列表
  document.getElementById('mentees').appendChild(card);
  
  // 清空表单
  document.getElementById('name').value = '';
  document.getElementById('rating').value = '';
  document.getElementById('comments').value = '';
}

CSS部分和方案1一样，不需要修改。

关键原理说明 #

原来的innerHTML =是覆盖式赋值，会删除容器内所有现有DOM节点，替换成新的HTML字符串。而innerHTML +=相当于innerHTML = 原有内容 + 新内容，实现了追加；appendChild则是直接把新创建的DOM节点添加到容器的子节点末尾，同样不会影响原有内容。

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