Warum wird in der einen Variante das Element mit appendChild() ersetzt und in der anderen nicht?

[dedlfix]

Tach!

Variante 1 fügt p mit appendChild() in main mit jedem Klick hinzu. Dabei wird bei jedem Klick p aber 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 p nicht ersetzt, sondern erneut nach dem letzten p hinzugefü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.