HTML DOM - Elemente

HTML-Elemente hinzufügen, löschen und ersetzen.

Neue HTML-Elemente erstellen - createElement()

Um ein neues Element zum HTML-DOM hinzuzufügen, müssen Sie zuerst das Element erstellen und es dann an ein vorhandenes Element anhängen.

Beispiel

<div id="div1"> <p id="p1">Dies ist ein Absatz.</p> <p id="p2">Dies ist ein weiterer Absatz.</p> </div> <script>var para=document.createElement("p"); var node=document.createTextNode("This is a new paragraph."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para);</script>

Selbst ausprobieren »

Beispiel erklärt

Dieser Code erstellt ein neues <p>-Element:

var para=document.createElement("p");

Um Text zum <p>-Element hinzuzufügen, müssen Sie zuerst einen Textknoten erstellen. Dieser Code erstellt den Textknoten:

var node=document.createTextNode("This is a new paragraph.");

Dann müssen Sie den Textknoten an das <p>-Element anhängen:

para.appendChild(node);

Schließlich müssen Sie das neue Element an ein vorhandenes Element anhängen.

Dieser Code findet ein vorhandenes Element:

var element=document.getElementById("div1");

Dieser Code hängt das neue Element an das vorhandene Element an:

element.appendChild(para);

Neue HTML-Elemente erstellen - insertBefore()

Im vorherigen Beispiel hat die Methode appendChild() das neue Element als letztes untergeordnetes Element des übergeordneten Elements hinzugefügt.

Wenn Sie das nicht möchten, können Sie die Methode insertBefore() verwenden:

Beispiel

<div id="div1"> <p id="p1">Dies ist ein Absatz.</p> <p id="p2">Dies ist ein weiterer Absatz.</p> </div> <script>var para=document.createElement("p"); var node=document.createTextNode("This is a new paragraph."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child);</script>

Selbst ausprobieren »

Vorhandene HTML-Elemente löschen

Um ein HTML-Element zu löschen, müssen Sie das übergeordnete Element dieses Elements kennen:

Beispiel

<div id="div1"> <p id="p1">Dies ist ein Absatz.</p> <p id="p2">Dies ist ein weiterer Absatz.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>

Selbst ausprobieren »

Beispiel erklärt

Dieses HTML-Dokument enthält ein <div>-Element mit zwei untergeordneten Knoten (zwei <p>-Elemente):

<div id="div1">

Dies ist ein Absatz.


Dies ist ein weiterer Absatz.


</div>

Finden Sie das Element mit id="div1":

var parent=document.getElementById("div1");

Finden Sie das <p>-Element mit id="p1":

var child=document.getElementById("p1");

Löschen Sie das untergeordnete Element aus dem übergeordneten Element:

parent.removeChild(child);

lamp Können wir ein Element löschen, ohne auf sein übergeordnetes Element zu verweisen?
Entschuldigung. Das DOM muss das Element, das Sie löschen möchten, und dessen übergeordnetes Element kennen.

Hier ist ein gängiger Workaround: Finden Sie das untergeordnete Element, das Sie löschen möchten, und verwenden Sie dann die parentNode-Eigenschaft, um dessen übergeordnetes Element zu finden:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Ersetzen von HTML-Elementen

Um ein Element im HTML-DOM zu ersetzen, verwenden Sie die Methode replaceChild():

Beispiel

<div id="div1"> <p id="p1">Dies ist ein Absatz.</p> <p id="p2">Dies ist ein weiterer Absatz.</p> </div> <script>var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("This is a new paragraph."); para.appendChild(node); parent.replaceChild(para,child);</script>

Selbst ausprobieren »
Andere Erweiterungen