HTML-Elemente erzeugen
Für das Erzeugen von HTML-Elementen steht in JavaScript die Methode createElement() des document Objekts zur Verfügung. Damit das Element auch angezeigt werden kann, muss es in irgendein HTML-Element im Dokument eingefügt werden. Das geht zum Beispiel mit der Methode appendChild() angewendet auf ein Elementobjekt in JavaScript. In folgendem Code wird einem HTML Element ein weiterer Absatz mit JavaScript hinzugefügt.
<body>
<main id="main"><h2>Jadegrüne Seide</h2></main>
<script>
var neuerAbsatz = document.createElement("p");
document.getElementById("main").appendChild(neuerAbsatz);
</script>
</body>Mit appendChild() wird das Element als letztes Element eingefügt. Es gibt verschiedene Methoden für das Einfügen von HTML-ELementen, mit denen man die Einfügeposition steuern kann. Einen Überblick über solche Funktionen geben JavaScript-Referenzen.
HTML-Elemente entfernen
So wie manchmal HTML-Elemente dynamisch erzeugt werden müssen, kommt es auch oft vor, dass man im Programmablauf ein Element entfernen möchte. Dafür bietet JavaScript die Methode removeChild() für Elementobjekte an. Folgendes Codebeispiel zeigt, wie vom main-Element eine Überschrift entfernt werden kann.
<body>
<main id="main">
<h2 id="seide">Jadegrüne Seide</h2>
</main>
<script>
var ueberschrift = document.getElementById("seide");
document.getElementById("main").removeChild(ueberschrift);
</script>
</body>Aufgaben
Im ersten Codebeispiel oben wird dem main-Element ein neuer Absatz hinzugefügt (p-Element). Allerdings enthält der Absatz noch keinen Text. Benutze die Infos von der vorherigen Kursseite, um den Absatz auch direkt mit Text zu füllen
Erstelle ein Script, welches alle Absätze (p-Elemente) aus einem HTML-Dokument entfernt.