Hinzufügen und Entfernen von Knoten (HTML-Elemente)
Erstellen neuer HTML-Elemente (Knoten)
Um ein neues Element in die HTML-DOM hinzufügen, müssen Sie das Element (Elementknoten) zuerst erstellen und dann zu einem bestehenden 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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Versuch es selber " Beispiel erklärt
Dieser Code erstellt ein neues <p> Element:
var para = document.createElement("p");
Um Text zu dem hinzufügen <p> Element, müssen Sie einen Textknoten zunächst erstellen. Dieser Code erstellt einen Textknoten:
var node = document.createTextNode("This is a new paragraph.");
Dann müssen Sie den Textknoten an den anhängen <p> Element:
para.appendChild(node);
Schließlich müssen Sie das neue Element zu einem vorhandenen Element anhängen.
Dieser Code findet ein vorhandenes Element:
var
element = document.getElementById("div1");
Dieser Code fügt das neue Element an das bestehende Element:
element.appendChild(para);
Erstellen neuer HTML - Elemente - insertBefore()
Die appendChild() Methode in dem vorherigen Beispiel beigefügten das neue Element als das letzte Kind des Elternteils.
Wenn Sie nicht wollen , dass Sie die verwenden können , insertBefore() Methode:
Beispiel
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Versuch es selber " Entfernen vorhandener HTML-Elemente
Um ein HTML-Element zu entfernen, müssen Sie das übergeordnete des Elements wissen:
Beispiel
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Versuch es selber " Das Verfahren node.remove() wird in der DOM - 4 - Spezifikation implementiert.
Aber wegen der schlechten Browser unterstützen, sollten Sie es nicht verwenden.
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>
Finden Sie das Element mit id="div1" :
var parent = document.getElementById("div1");
Finden Sie das Element <p> mit id="p1" :
var child = document.getElementById("p1");
Nehmen Sie das Kind aus dem Mutter:
parent.removeChild(child);
Es wäre schön, in der Lage sein, ein Element zu entfernen, ohne an die Eltern beziehen.
Aber Entschuldigung. Die DOM muss wissen, sowohl das Element, das Sie entfernen möchten, und ihre Eltern.
Hier ist eine gemeinsame Lösung: Finden Sie das Kind, das Sie entfernen möchten, und verwenden Sie seine parentNode Eigenschaft, um die Eltern zu finden:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Ersetzen HTML-Elemente
Ein Element an das HTML - DOM, verwenden Sie das zu ersetzen replaceChild() Methode:
Beispiel
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Versuch es selber "