Hinzufügen, Entfernen und Ersetzen
Hinzufügen, Entfernen und Ersetzen von Elementen
Wenn eine Webseite geladen wird, erstellt der Browser aus dem HTML-Dokument das DOM (Document Object Model). Das DOM ist eine Baumstruktur aller HTML-Elemente. Über das DOM können Elemente mit Hilfe von JavaScript zu einer Webseite hinzugefügt, von ihr entfernt oder ausgetauscht werden. Beim Hinzufügen von Elementen muss das neue Element zunächst erstellt und anschließend einem bereits existierenden Element hinzugefügt werden. Soll ein Element aus der Baumstruktur entfernt werden, muss das Elternelement ermittelt und das entsprechende Element aus diesem entfernt werden. Beim Ersetzen von Elementen muss das neue Element zunächst erstellt und dann in einem bereits existierenden Element mit einem anderen ausgetauscht werden.
Hinzufügen von Elementen
Mit der Methode „document.createElement()“ kann ein neues Element erstellt werden. Mit der Methode „appendChild()“ kann ein Element einem anderen Element hinzugefügt werden. Wobei mit der Methode „appendChild()“ das neue Element am Ende eingefügt wird:
HTML-Datei:
Ergebnis:
Beispiel 1
Absatzelement 1
Mit der Methode „insertBefore()“ kann ein neues Element einem existierenden Element hinzugefügt werden, wobei im Gegensatz zu „appendChild()“ das neue Element an den Anfang eingefügt wird:
HTML-Datei:
Ergebnis:
Beispiel 2
Absatzelement
Entfernen von Elementen
Mit der Methode „removeChild()“ kann ein Element aus seinem übergeordneten Element entfernt werden. Dabei wird die Methode auf das übergeordnete Element angewendet und das zu entfernende Element übergeben:
HTML-Datei:
Ergebnis:
Beispiel 3
Absatzelement
Ersetzen von Elementen
Mit der Methode „replaceChild()“ kann ein Element durch ein anderes Element ausgetauscht werden. Dabei wird die Methode auf das übergeordnete Element angewendet und als erster Parameter das neue und als zweiter Parameter das auszutauschende Element übergeben:
HTML-Datei:
Ergebnis:
Beispiel 4
Mustertext
Abschlussübung
Als Abschlussübung kannst du folgendes Beispiel erstellen. Wird der Button „Erstellen“ angeklickt, wird aus dem Inhalt des „input“-Elements ein neues Absatzelement ersellt und in das „div“-Element „Liste“ eingefügt. Wird auf ein Absatzelement aus dem „div“-Element geklickt, wird das Absatzelement im „div“-Element „Favorit“ durch das angeklickte Absatzelement ausgetauscht:
Beispiel 5
Name:Liste
Listenelement
Favorit
Gehe dabei wie folgt vor:
- Erstelle ein „input“-Element zur Eingabe von Text
- Erstelle ein Button, dessen „onclick“-Attribut auf eine erste Funktion verweist
- Erstelle ein „div“-Element mit einem „id“-Attribut
- Erstelle in dem „div“-Element ein Absatzelement, mit einem „onclick“-Attribut, das auf eine zweite Funktion verweist
- Erstelle ein zweites „div“-Element mit einem Absatzelement
- Erstelle in der ersten Funktion mit „createElement()“ ein neues Absatzelement
- Gebe dem neuen Absatzelement den Inhalt vom „input“-Element
- Erstelle mit „createAttribute()“ ein „onclick“-Attribut
- Lasse das neue „onclick“-Attribut auf die zweite Funktion verweisen
- Weise dem neuen Absatzelement mit „setAttributeNode()“ das gerade erstellte „onclick“-Attribut zu
- Weise dem ersten „div“-Element das neue Absatzelement zu
- Ermittele in der zweiten Funktion mit „firstElementChild“ das Absatzelement im zweiten „div“-Element
- Ersetze das gerade ermittelte Absatzelement mit „replaceChild()“ durch das Absatzelement, das der zweiten Funktion übergeben wurde
Die Lösung kannst du dir hier herunterladen:
