Das DOM – das Mysterium der JavaScript-Welt - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 222

var text1 = document.createTextNode("Methoden von node");
u1.appendChild(text1);
var u2 = document.createElement("h2");
var text2 = document.createTextNode("");
text2.insertData(0, "Textdaten mit insertData()");
text2.appendData(" und mit appendData() hinzufügen");
u2.appendChild(text2);
document.getElementsByTagName("body")[0].appendChild(u2);
document.getElementsByTagName("body")[0].insertBefore(u1, u2);
with (document.getElementsByTagName("h1")[0]) {
setAttributeNode(ausrichtung);
setAttributeNode(css);
}
u2.setAttributeNode(u1.getAttributeNode("style").cloneNode(true));
u2.setAttribute("align", "right");
</script>
</body>
</html>
Bild 8.8■ Die Seite wurde vollkommen dynamisch durch Methoden von node und document aufge-
baut.
Zuerst erzeugen wir mit document.createAttribute("align") einen Attributknoten,
der mit ausrichtung.nodeValue = "center" einen Wert zugewiesen bekommt. Analog
wird ein weiterer Attributknoten für ein CSS-Attribut erstellt. Danach erstellen wir mit
var u1 = document.createElement("h1") einen Elementknoten und dann einen Textkno-
ten. Den Textknoten hängen wir mit u1.appendChild(text1) an den Elementknoten.
In den folgenden Zeilen machen wir im Grunde das Gleiche, nur verwenden wir andere
Methoden von node . Das Erstellen des Elementknotens ist noch gleich, aber der Textkno-
ten wird erst einmal mit einem leeren Inhalt erzeugt. Wir verwenden nun zuerst
insertData() zum Einfügen eines Inhalts des Textknotens und dann appendData() , um
weiteren Inhalt nahtlos an diesen anzuhängen. Das Hinzufügen eines Kindelements mit
document.getElementsByTagName("body")[0].appendChild(u2) ist bereits aus den
letzten Beispielen bekannt, aber auch hier demonstrieren wir mit document.
getElementsByTagName("body")[0].insertBefore(u1,u2) einen alternativen Weg, um
den Knoten u2 hinter u1 einzufügen.
Der Block zum Setzen der Attribute ist wieder aus den letzten Beispielen bekannt. Hier
werden mit setAttributeNode() Attributknoten einem Elementknoten hinzugefügt. Aber
auch bei Attributen werden noch ein paar neue Dinge gezeigt. Bei der Anweisung
u2.setAttributeNode(u1.getAttributeNode("style").cloneNode(true)); verwenden
wir die Methode clone() , um einen bestehenden Attributknoten samt Inhalt zu klonen und
diesen dann mit setAttributeNode() einem anderen Knoten zuzuweisen. In der folgenden
Zeile sehen Sie mit u2.setAttribute("align", "right") , wie Sie auch ohne das explizite
Erzeugen eines Attributknotens ein Attribut bei einem Elementknoten setzen können.