HTML DOM - Ändern
HTML ändern = Elemente, Attribute, Stile und Ereignisse ändern.
HTML-Elemente ändern
Das Ändern des HTML DOM umfasst viele verschiedene Aspekte:
- HTML-Inhalt ändern
- CSS-Stile ändern
- HTML-Attribute ändern
- Neue HTML-Elemente erstellen
- Vorhandene HTML-Elemente löschen
- Ereignisse ändern (Handler)
In den folgenden Kapiteln lernen wir gängige Methoden zum Ändern des HTML DOM eingehend kennen.
HTML-Inhalt erstellen
Der einfachste Weg, den Inhalt eines Elements zu ändern, ist die Verwendung der innerHTML-Eigenschaft.
Das folgende Beispiel ändert den HTML-Inhalt eines <p>-Elements:
Beispiel
<p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML="New text!";</script>
<p>Der Absatzinhalt wird durch ein Skript geändert.</p>
Selbst ausprobieren »
 |
Wir werden die Details des Beispiels in den folgenden Kapiteln erklären. |
|---|
HTML-Stil ändern
Über das HTML DOM können Sie auf das style-Objekt von HTML-Elementen zugreifen.
Das folgende Beispiel ändert den HTML-Stil eines Absatzes:
Beispiel
<p id="p1">Hallo Welt!</p>
<p id="p2">Hallo Welt!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
Selbst ausprobieren »
Neue HTML-Elemente erstellen
Um dem HTML DOM ein neues Element hinzuzufügen, müssen Sie zuerst das Element (Elementknoten) erstellen und es dann an ein vorhandenes Element anhängen.
Beispiel
<div id="div1">
<p id="p1">Dies ist ein Absatz.</p>
<p id="p2">Dies ist ein weiterer Absatz.</p>
</div>
<script>var para=document.createElement("p");
var node=document.createTextNode("This is a new paragraph.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);</script>
Selbst ausprobieren »