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

小云云
Freigeben: 2017-11-17 15:11:51
Original
2876 Leute haben es durchsucht

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>
Nach dem Login kopieren

Dieser Code erstellt ein neues

-Element:

var para=document.createElement("p");
Nach dem Login kopieren

Um Text zu einem

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

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

Dann müssen Sie diesen Textknoten an das

-Element anhängen:

para.appendChild(node);
Nach dem Login kopieren

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");
Nach dem Login kopieren

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

element.appendChild(para);
Nach dem Login kopieren

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>
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!