Knoten (HTML-Elemente) hinzufügen und entfernen
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.
<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>
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);
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:
<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>
Um ein HTML-Element zu entfernen, verwenden Sie remove()
Methode:
<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>
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.
Für Browser, die die Methode remove()
nicht unterstützen, müssen Sie die finden Übergeordneter Knoten zum Entfernen eines Elements:
<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>
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);
Um ein Element im HTML-DOM zu ersetzen, verwenden Sie die Methode replaceChild()
:
<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>