JavaScript-DOM-Knoten


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Knoten (HTML-Elemente) hinzufügen und entfernen


Neue HTML-Elemente (Knoten) erstellen

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

Beispiel

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

Beispiel erklärt

Dieser Code erstellt ein neues <p>-Element:

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

Um dem Element <p> Text hinzuzufügen, müssen Sie zunächst einen Textknoten erstellen. Dieser Code erstellt einen Textknoten:

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

Anschließend müssen Sie den Textknoten an das Element <p> anhängen:

para.appendChild(node);

Abschließend müssen Sie das neue Element an ein vorhandenes Element anhängen.

Dieser Code findet ein vorhandenes Element:

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

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

element.appendChild(para);


Neue HTML-Elemente erstellen - insertBefore()

Die Methode appendChild() im vorherigen Beispiel hat das neue Element als angehängt das letzte Kind des Elternteils.

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

Beispiel

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

Vorhandene HTML-Elemente entfernen

Um ein HTML-Element zu entfernen, verwenden Sie remove() Methode:

Beispiel

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

Beispiel erklärt

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

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Suchen Sie das Element, das Sie entfernen möchten:

const elmnt = document.getElementById("p1");

Führen Sie dann die Methode „remove()“ für dieses Element aus:

elmnt.remove();

Die Methode remove() funktioniert nicht in Ältere Browser finden Sie im folgenden Beispiel zur Verwendung von stattdessen „removeChild()“ verwenden.


Entfernen eines untergeordneten Knotens

Für Browser, die die Methode remove() nicht unterstützen, müssen Sie die finden Übergeordneter Knoten zum Entfernen eines Elements:

Beispiel

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

Beispiel erklärt

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

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Suchen Sie das Element mit id="div1":

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

Suchen Sie das Element <p> mit der id="p1":

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

Entfernen Sie das untergeordnete Element vom übergeordneten Element:

parent.removeChild(child);

Hier ist eine häufige Problemumgehung: Suchen Sie das untergeordnete Element, das Sie entfernen möchten, und verwenden Sie es parentNode-Eigenschaft, um das übergeordnete Element zu finden:

const 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">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
 
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is a paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>