我有一个包含此正文的 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>
它包括一个表单，并且有一个用于保存新内容的按钮：
<button type="submit" onclick="saveNewContent()">Save</button>
加载页面时，会加载包含现有内容的数组，然后通过填写表单并单击“保存”添加新内容时，页面应显示现有内容和新内容。
我已经成功地显示了新内容。我遇到的问题是，每当我单击“保存”时，页面现在都会向我显示现有内容两次以及新输入的内容。
例如：有 3 个现有元素，我添加第 4 个元素并单击“保存”，现在我看到重复的 3 个现有元素和新输入的元素（总共 7 个元素，而不是 4 个）。
saveNewContent 函数应该包含 loadContent 函数：
function saveNewContent() {
loadContent();
}
如何在每次添加新内容时不再重复现有内容？我只是希望能够一次性看到现有内容以及新添加的内容。
这是loadContent()函数。它遍历一个对象数组，然后 saveNewContent 创建新对象并将其添加到同一对象数组中。
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()function loadContent () {
// clear everything at first:
document.getElementById("contents").innerHTML = ""
for ( /* ... */ ) {
// ...
}
}