Fügen Sie HTML-Dom-Elemente hinzu oder entfernen Sie sie

Document Object Model (DOM) ist eine Standard-Programmierschnittstelle zur Verarbeitung erweiterbarer Auszeichnungssprachen, die von der W3C-Organisation empfohlen wird. Auf einer Webseite sind die Objekte, die die Seite (oder das Dokument) organisieren, in einer Baumstruktur organisiert, die zur Darstellung der Objekte im Dokument verwendet wird. In diesem Kapitel zeigen wir Ihnen, wie Sie oder hinzufügen Tutorial zum Löschen von HTML-Dom-Elementen. Kommen Sie und lernen Sie es jetzt.

Erstellen eines neuen HTML-Elements

Um ein neues Element zum HTML-DOM hinzuzufügen, müssen Sie zunächst das Element (Element) erstellen node ) und hängt das Element dann an ein vorhandenes Element an.

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

Dieser Code erstellt ein neues e388a4556c0f65e1904146cc1a846bee-Element:

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

Um Text zu einem e388a4556c0f65e1904146cc1a846bee-Element hinzuzufügen, müssen Sie zunächst einen Textknoten erstellen. Dieser Code erstellt einen Textknoten:

var node=document.createTextNode("这是一个新段落。");

Dann müssen Sie diesen Textknoten an das e388a4556c0f65e1904146cc1a846bee-Element anhängen:

para.appendChild(node);

Zuletzt müssen Sie ihn an ein vorhandenes anhängen element Dieses neue Element anhängen.

Dieser Code findet ein vorhandenes Element:

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

Der folgende Code fügt ein neues Element nach einem vorhandenen Element hinzu:

element.appendChild(para);

Vorhandene HTML-Elemente löschen

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

Es wäre schön, ein Element löschen zu können, ohne auf das übergeordnete Element zu verweisen.
Aber es ist schade. Das DOM muss das zu löschende Element und sein übergeordnetes Element kennen.

Dies ist eine gängige Lösung: Suchen Sie das untergeordnete Element, das Sie entfernen möchten, und verwenden Sie dann sein parentNode-Attribut, um das übergeordnete Element zu finden:

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

Das ist alles zum Hinzufügen oder Entfernen von HTML-Dom-Elementen Verwandte Tutorials, ich hoffe, es kann allen helfen.

Verwandte Empfehlungen:

So verwenden Sie DOM zum Zuweisen von Ereignissen

Der Unterschied zwischen leeren und entfernen beim Löschen von DOM-Knoten

Wie jQuery DOM betreibt

Das obige ist der detaillierte Inhalt vonFügen Sie HTML-Dom-Elemente hinzu oder entfernen Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!