Tach!
Variante 1 fügt
pmitappendChild()inmainmit jedem Klick hinzu. Dabei wird bei jedem Klickpaber ersetzt.
Aus der MDN: "If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position …"
Das Element wird nicht ersetzt, es wird verschoben, bleibt also am selben Fleck.
Der Code, der das Element erzeugt und die Referenz drauf hält wird nur einmalig ausgeführt.
Variante 2 nutzt eine Klasse. Hier wird mit jedem Klick aber
pnicht ersetzt, sondern erneut nach dem letztenphinzugefügt.
Dein Aufruf von add() erzeugt jedes Mal ein neues Element.
Allgemein ist noch zu sagen, dass du in deinen Fällen const statt let verwenden kannst. Die Variablen werden genau einmal befüllt und dann nur noch gelesen. Dafür ist const vorgesehen. let nimmt man, wenn der Wert noch geändert werden soll.
dedlfix.