DOM-Manipulation - Knoten verändern
1. Die Referenz
Um einen Knoten zu verändern, muss vorher eine eindeutige Referenz desselben erzeugt werden. Dabei kann man sowohl die
entsprechenden Methoden des document
- als auch des
node
-Objektes nutzen. Dabei spielt es keine Rolle, ob das Element schon
direkt im HTML-/XML-Dokument vorhanden ist, oder vorher über das DOM per JavaScript erzeugt worden ist. Bei letzterem
ist die Referenz aber schon vorhanden. Vorausgesetzt, man hat sie nicht aus Unachtsamkeit überschrieben. Oder weggeballert.
Wichtig
Bei allen folgenden Beispielen muss auch immer eine Referenz auf das Elternelement vorhanden sein. Da es da diverse Möglichkeiten gibt, stelle ich euch mal verschiedene Varianten vor.
2. removeChild
Damit löscht man einen bereits existierenden Kindnoten. Dabei ist der Parameter das zu löschende Element.
<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
...
wech = document.getElementById('rahmen').lastChild;
document.getElementById('rahmen').removeChild(wech);
3. replaceChild
Ersetzt einen Kindknoten durch einen anderen. Dazu werden zwei Parameter benötigt. Zuerst die Referenz auf den neuen Knoten, dann die auf den zu ersetzenden.
<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
...
vatta = document.getElementById('rahmen');
absatz = document.createElement('p');
text = document.createTextNode ('Dies ist ein Text');
absatz.appendChild (text);
ersetz = vatta.firstChild;
vatta.replaceChild (absatz, ersetz);
Erläuterung
Als Erstes erzeugen wir mit vatta = document.getElementById('rahmen');
eine Referenz auf das Elternelement.
Das erspart uns später ein wenig Tipparbeit. Mit den folgenden drei Zeilen erzeugen wir bekanntlichermaßen einen neuen
Knoten inklusive Text. Dann wählen wir das zu ersetzende Element aus (ersetz = vatta.firstChild;
) um es anschließend
mittels vatta.replaceChild (absatz, ersetz);
auszutauschen.
4. cloneNode
Damit wird eine exakte Kopie eines Knotens erzeugt. Der Parameter kann dabei entweder auf true
oder false
gesetzt werden. Bei ersterem werden alle weiteren Kindknoten ebenfalls erfasst, beim zweitem nicht, sondern nur das Hauptelement.
<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
<div id="rahmen2"></div>
...
dolly = document.getElementById('rahmen').cloneNode(true);
document.getElementById('rahmen2').appendChild (dolly);
Ein Hinweis
Dieses Beispiel ist ein wenig unglücklich, da wir ja eine komplette(!) Kopie des <div id="rahmen">
erzeugen und
die in das zweite einhängen. Also haben wir jetzt zwei Elemente mit derselben ID.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt