Latest web development tutorials

HTML DOM-Elemente

Hinzufügen, Löschen und HTML-Elemente zu ersetzen.

Erstellen Sie ein neues HTML-Element - appendChild ()

Um ein neues Element in die HTML-DOM hinzuzufügen, müssen Sie zuerst das Element erstellen und hängen Sie ihn an die vorhandenen Elemente.

Beispiele

<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>

Versuchen »

Beispiele für analytische

Dieser Code erstellt ein neues Element <p>:

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

So fügen Sie Text in das Element <p>, müssen Sie zuerst einen Textknoten erstellen. Dieser Code erstellt einen Textknoten:

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

Dann müssen Sie Textknoten mit dem Element <p> anhängen:

para.appendChild(node);

Schließlich müssen Sie dieses neue Element zu den bestehenden Elemente hinzuzufügen.

Finden Sie diesen Code zu einem vorhandenen Element:

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

Der Code ein neues Element in die vorhandenen Elemente hinzuzufügen:

element.appendChild(para);

Erstellen Sie ein neues HTML-Element - insert ()

An einem Beispiel appendChild () -Methode, das neue Element als das letzte Kind-Element des übergeordneten Elements hinzuzufügen.

Wenn Sie dies nicht wünschen, können Sie die insert () -Methode verwenden:

Beispiele

<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>

Versuchen »

Entfernen Sie die vorhandene HTML-Elemente

Um HTML-Elemente zu löschen, müssen Sie das übergeordnete Element des Elements wissen:

Beispiele

<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>


Versuchen »

Beispiele für analytische

Dieses Dokument enthält HTML <div> Element in einer der beiden untergeordneten Knoten (zwei <p> ​​Element) mit der:

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

Finden id = "div1" Elemente:

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

Finden id = "p1" das Element <p>:

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

Entfernen Sie aus dem übergeordneten Element Unterelemente:

parent.removeChild(child);

Lampe Kann ich ein Element in dem Fall bezieht sich nicht auf das übergeordnete Element zu löschen?
Entschuldigung. DOM müssen die Elemente zu verstehen, die Sie löschen möchten, sowie sein übergeordnetes Element.

Hier sind eine gemeinsame Lösung: Unterelemente zu finden, die Sie entfernen müssen, und dann parentNode Attribut verwenden, um sein übergeordnetes Element zu finden:

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

Ersetzen Sie HTML-Elemente

Um die HTML-DOM-Elemente zu ersetzen, verwenden replaceChild () -Methode:

Beispiele

<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>

Versuchen »