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

[ebody]

Hallo,

Variante 1 fügt p mit appendChild() in main mit jedem Klick hinzu. Dabei wird bei jedem Klick p aber ersetzt.

Variante 2 nutzt eine Klasse. Hier wird mit jedem Klick aber p nicht ersetzt, sondern erneut nach dem letzten p hinzugefügt.

Ziel ist es wie in Variante 1 p immer zu ersetzen.

Dann nutze doch den Code von Variante 1

Nein, ich nutze eine Klasse in der eine solche Funktion vorkommt und möchte verstehen, warum es sich in der Variante mit der Klasse anders verhält.

Warum nutzt du denn dafür eine Klasse?

Die Klasse enthält deutlich mehr Code und Funktionen. Zu Demonstrationszwecken nutze ich hier nur den Code mit der relevanten Funktion in der Klasse.

Warum verhält es sich unterschiedlich? In beiden Varianten wird der button und auch die p Elemente dynamisch zugefügt.

Gruß ebody

[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.

[ebody]

Hallo,

vielen Dank für die Hilfe.

So funktioniert es (bisher): https://codepen.io/ebody/pen/XWMgQGO

Gruß ebody