5.4 Knoten hinzufügen
In diesem Abschnitt werden Textknoten, HTML-Elementknoten und Attributknoten erzeugt und einem Dokument hinzugefügt. Folgende Methoden des document-Objekts werden genutzt:
-
Die Methode createTextNode()erzeugt einen Textknoten. Parameter der Methode ist eine Zeichenkette, die den Text enthält.
-
Die Methode createElement()erzeugt einen HTML-Elementknoten. Parameter der Methode ist eine Zeichenkette mit der Markierung.
Außerdem werden drei Methoden für ein node-Objekt eingesetzt:
-
appendChild() fügt einen Kindknoten zu einem Knoten hinzu, am Ende des Felds der Kindknoten. Parameter der Methode ist ein Verweis auf den Knoten, der hinzugefügt wird.
-
setAttribute() setzt den Wert eines Attributknotens. Falls der Attributknoten noch nicht existiert, wird er zuvor erzeugt. Parameter der Methode sind zwei Zeichenketten, die den Namen und den neuen Wert des Attributs enthalten.
-
insertBefore() fügt einen Kindknoten zu einem Knoten hinzu, vor einem anderen Kindknoten. Parameter der Methode sind zwei Verweise: ein Verweis auf den Knoten, der hinzugefügt wird, und ein Verweis auf den Knoten, vor dem eingefügt wird.
Es folgt das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>DOM, hinzufügen</title>
<script>
function anhaengen()
{
var text = document.createTextNode("angehängter Absatz");
var absatz = document.createElement("p");
absatz.appendChild(text);
absatz.setAttribute("style", "text-align:left");
document.body.appendChild(absatz);
}
function einschieben()
{
var text = document.createTextNode("eingeschobener Absatz");
var absatz = document.createElement("p");
absatz.appendChild(text);
absatz.setAttribute("style", "text-align:left");
document.body.insertBefore(absatz, document.getElementById("a3"));
}
</script>
</head>
<body>
<p id="a1" style="text-align:left">Erster Absatz</p>
<p id="a2" style="text-align:left">Zweiter Absatz</p>
<p id="a3" style="text-align:left">Dritter Absatz</p>
<p><input id="anh" type="button" value="Anhängen">
<input id="ein" type="button" value="Einschieben"></p>
<script>
document.getElementById("anh").addEventListener("click", anhaengen);
document.getElementById("ein").addEventListener("click", einschieben);
</script>
</body></html>
Listing 5.4 Datei »dom_hinzufuegen.htm«
In Abbildung 5.5 sehen Sie das ursprüngliche Dokument.
Abbildung 5.5 Vor dem Hinzufügen
Die beiden Schaltflächen Anhängen und Einschieben dienen zum Anhängen bzw. zum Einschieben eines neuen HTML-Elementknotens.
In der JavaScript-Funktion anhaengen() wird ein neuer Textknoten mit dem Text angehängter Absatz erzeugt. Anschließend wird ein HTML-Elementknoten für einen Absatz erzeugt. Dem HTML-Elementknoten werden ein Textknoten und ein Attributknoten hinzugefügt, anschließend wird er dem body-Knoten des Dokuments am Ende angehängt.
In der Funktion einschieben() passiert fast dasselbe. Der Text ist etwas anders. Der neu erzeugte HTML-Elementknoten wird diesmal vor dem angegebenen Kindknoten des body-Knotens eingeschoben.
In Abbildung 5.6 sehen Sie das Dokument, nachdem beide Schaltflächen jeweils zweimal betätigt wurden.
Abbildung 5.6 Nach dem Hinzufügen