求助：点击保存按钮时如何避免重复加载已有内容

现有如下HTML结构：

<body onload="loadContent()">
  <form action="" onsubmit="event.preventDefault()">
    <table>
      <tr>
        <td></td>
        <td> 
          <button type="submit" onclick="saveNewProject()">Save</button>
        </td>
      </tr>
    </table>
  </form>
</body>

页面包含表单和实际调用saveNewContent()的保存按钮：

<button type="submit" onclick="saveNewContent()">Save</button>

页面加载时通过loadContent()加载已有内容数组，点击保存后需显示已有内容+新添加内容，但目前每次点击保存，已有内容会重复显示——比如原有3条内容，添加第4条后会显示3条重复的旧内容+1条新内容，共7条。

相关JS代码：

function saveNewContent() {
  loadContent();
}

function loadContent() {
  for (var i=0; i < contents.length; i++) {
    card                    = document.createElement('div')
    card.className          = 'card'
    description             = document.createElement('span')
    description.textContent = contents[i]["description"]
    contentCard             = document.getElementById("contents").appendChild(card)
    contentCard.appendChild(description)
  }
}

需求：避免重复显示已有内容，实现仅显示一次全部内容（旧内容+新内容）。

问题核心是每次调用loadContent()时，都会在原有内容基础上追加新元素，而非先清空旧内容再重新渲染。提供两种实用解决方式：

方式一：渲染前清空容器 #

修改loadContent()函数，遍历数组前先清空内容容器，再重新生成所有元素，确保每次渲染都是全新的内容集合：

function loadContent() {
  // 先清空目标容器
  const contentContainer = document.getElementById("contents");
  contentContainer.innerHTML = '';
  
  for (var i=0; i < contents.length; i++) {
    const card = document.createElement('div')
    card.className = 'card'
    const description = document.createElement('span')
    description.textContent = contents[i]["description"]
    card.appendChild(description)
    contentContainer.appendChild(card)
  }
}

注：给变量添加const声明，避免全局变量污染，是更规范的写法。

方式二：仅渲染新添加的内容（性能更优） #

如果内容数量较多，重新渲染全部内容会浪费性能，可以修改逻辑：在saveNewContent()中完成新内容对象的添加后，直接创建对应元素并追加到容器，无需调用loadContent()重新渲染全部：

function saveNewContent() {
  // 假设此处已完成新内容对象的创建并添加到contents数组
  const newContent = contents[contents.length - 1]; // 获取刚添加的新内容
  
  const card = document.createElement('div')
  card.className = 'card'
  const description = document.createElement('span')
  description.textContent = newContent["description"]
  card.appendChild(description)
  document.getElementById("contents").appendChild(card)
}

这种方式保留页面加载时的初始化渲染逻辑，后续仅处理新增内容，既避免重复显示问题，又提升了性能。

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