javascript - 只向 DOM 添加新的数组元素

Question

我正在制作一个待办事项列表样式的应用程序，但我一直在研究如何仅仅从添加到数组的新元素创建 DOM 元素，并且如果您重新单击按钮，将继续渲染相同的元素 n 次。

我有一个简单的 HTML 表单，它为新的“Snippet”对象创建标题。

然后我将它们添加到这样的数组中

function addSnippetToArray() {
    
    let snippetTitle = document.getElementById('snippetTitle').value;
    let snippetToAdd = new Snippet(snippetTitle);
    snippetsArray.push(snippetToAdd);
    console.log(snippetsArray);
}

然后我尝试使用像这样的表单按钮将它们呈现到它们自己的 DIV 中...

function displaySnippets() {

    let container = document.getElementById('container');
    let newCard = document.createElement('div');
    snippetsArray.forEach(function (snip) {
    newCard.textContent = snip.title;
    container.appendChild(newCard);

    })
}

我不明白的是，当我在 addSnippetsToArray() 函数末尾调用 displaySnippets() 时，它似乎工作正常。

但是，如果我只是使用它自己的按钮调用 displaySnippets()，它只会呈现数组中的最后一个元素，并且如果您再次单击该按钮，则会多次呈现它。

我想做的是...

1. 使用“添加”按钮将项目添加到数组
2. 当我点击“显示”时将项目渲染到它们自己的 DIV 中
3. 只向 DOM 添加尚不存在的新项(如果只添加 1 个元素，我认为最好不要清除整个内容并重绘所有内容？)

我像这样从按钮调用函数:

<input type="button" value="Add snippet" onclick="addSnippetToArray()">
<input type= "button" value="Display" onclick="displaySnippets()">

Answer 1

你需要为每个创建新的 div 并在循环之前清空容器

 const container = document.getElementById('container');
 container.innerHTML = ""; // clear
 snippetsArray.forEach(function (snip) {
  let newCard = document.createElement('div');
  newCard.textContent = snip.title;
  container.appendChild(newCard);
})