Hauptmenü

Untermenü

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 (absatzele);

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