Estoy creando una aplicación de estilo de lista de tareas pendientes, pero estoy atascado en cómo crear solo elementos DOM solo a partir de elementos nuevos que se agregan a una matriz y seguirá representando el mismo elemento n veces si vuelve a hacer clic en el botón.

Tengo un formulario HTML simple que crea un título para un nuevo objeto ' Snippet '.

Luego los agrego a una matriz como esta

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

Luego estoy tratando de convertirlos en sus propios DIV usando un botón de formulario como este ...

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

Lo que no entiendo es que cuando llamo a displaySnippets() al final de la función addSnippetsToArray() , parece funcionar bien.

Pero si solo llamo a displaySnippets() usando su propio botón, solo representa el último elemento de la matriz y lo sigue representando varias veces si vuelve a hacer clic en el botón.

Lo que estoy tratando de hacer es...

1. agregar elementos a la matriz con el botón 'agregar'
2. renderizar elementos en su propio DIV cuando presiono 'mostrar'
3. solo agregue nuevos elementos al DOM que aún no estén allí (pensé que era mejor hacer esto sin borrar todo y volver a dibujar todo si solo se agrega 1 elemento)

Estoy llamando a las funciones desde el botón de esta manera:

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