DOM-Manipulation - Knoten erzeugen
1. Methoden oberhalb des node
-Objektes
Wie auch beim Ansteuern der Wurzelelemente benötigt man bei DOM-Manipulationen das ein oder andere Mal ein paar Methoden des
document
-Objektes. Für die Erzeugung brauchen wir das hier:
createElement
Wie der Name schon sagt, erzeugt man damit ein HTML-/XML-Element. Der Parameter steht dann für das zu erzeugende Tag. Wenn man zum Beispiel eine Überschrift 1. Ordnung haben möchte, so geht das so.
headline = document.createElement('h1');
Wichtig zu wissen ist, dass das erzeugte Element zu diesem Zeitpunkt nur als Referenz existiert und noch nicht im DOM-Baum hängt.
2. Knoten einhängen
Um in ein bereits existierendes Element einen weiteren Knoten einzufügen, kann man mit appendChild
arbeiten. Dabei
wird das Kindelement am Ende des Elternknotens eingefügt. Keine Angst, hier geht es nur um die Theorie, beim entsprechenden Tutorial
kommen wir dann zur Praxis.
Ein Beispiel
<div id="rahmen"></div>
...
absatz = document.createElement('p');
text = document.createTextNode ('Dies ist ein Text');
absatz.appendChild (text);
document.getElementById('rahmen').appendChild(absatz);
Erläuterung
Mit absatz = document.createElement('p');
erzeugen wir einen Absatz. Da der ohne Text ziemlich sinnlos ist,
bauen wir uns den mit text = document.createTextNode ('Dies ist ein Text');
zusammen.
Beide oben erzeugten Elemente existieren bis dato nur als Referenzen. Daher fügen wir zuerst mit absatz.appendChild
(text);
den Textknoten in den Absatzknoten ein. Um jetzt aber diesen Absatz sehen zu können, benötigen wir ein bereits
existierendes Element, in diesem Fall also ein div
-Element mit dem Attribut id="rahmen"
. Und dort
fügen wir unseren Absatz inklusive Text mit document.getElementById('rahmen').appendChild(absatz);
am Ende ein.
Sollte das div
schon ein oder mehrere Kindelemente haben, so wird der Absatz mitsamt Text dahinter
angefügt!
Hinweis
createTextNode
gehört ebenfalls zum document
-Objekt. Und wie der Name schon erahnen lässt, wird
damit ein Textknoten erzeugt. Ich greife hier ein wenig vor, denn die Details dazu kommen später.
3. Knoten gezielt einhängen
Was macht man aber, wenn ein Wurzelelement bereits über mehrere Kindknoten verfügt und wir unseren Absatz an einer ganz bestimmten
Stelle einfügen wollen? Nun, dazu wählt man sich mit firstChild/lastChild
und/oder nextSibling/previousSibling
eines der Kindelemente aus. Und dann kann man mit insertBefore
vor diesem ausgewählten Element ein weiteres einfügen.
Ein Beispiel
<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
...
absatz = document.createElement('p');
text = document.createTextNode ('Dies ist ein Text');
ele = document.getElementById('rahmen').lastChild;
absatz.appendChild (text);
document.getElementById("rahmen").insertBefore (absatz, ele);
Erläuterung
Die ersten drei Zeilen JavaScript-Code habe ich schon oben erläutert, also solltet ihr deren Bedeutung kennen. Nun haben wir
ein Wurzelelement rahmen
mit zwei Kindknoten, den beiden Absätzen. Als "Markierung" wählen wir uns mit
ele = document.getElementById('rahmen').lastChild;
den zweiten Absatz aus. Und davor fügen wir den neuen Absatz
mit document.getElementById("rahmen").insertBefore (absatz, ele);
ein.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt