Latest web development tutorials

HTML-DOM Modifikation

Ändern Sie HTML = Änderung Elemente, Attribute, Stile und Veranstaltungen.


Bearbeiten von HTML-Elementen

Ändern Sie HTML-DOM viele verschiedene Aspekte bedeutet:

  • Ändern Sie den HTML-Inhalt
  • Ändern CSS-Stile
  • Ändern Sie die HTML-Attribute
  • Erstellen Sie ein neues HTML-Element
  • Entfernen Sie die vorhandene HTML-Elemente
  • Change-Ereignis (Handler)

In den folgenden Abschnitten werden wir die HTML-DOM in die Tiefe studieren das herkömmliche Verfahren zu ändern.


Erstellen von HTML-Inhalt

Der einfachste Weg, um den Inhalt des Elements zu ändern, ist die Innerhtml Eigenschaft zu verwenden.

Das folgende Beispiel ändert den Inhalt eines HTML-Element <p>:

Beispiele

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

Versuchen »

Lampe Wir werden in den folgenden Abschnitten, um Ihnen die Details des Beispiels erläutern.


Ändern von HTML-Styles

Durch die HTML-DOM, können Sie die HTML-Objekt-Stil-Elemente zuzugreifen.

Im folgenden Beispiel wird ein HTML-Absatzformat zu ändern:

Beispiele

<html>

<body>

<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>


Versuchen »


Erstellen Sie ein neues HTML-Element

Um ein neues Element in die HTML-DOM hinzuzufügen, müssen Sie zuerst das Element erstellen (ein Elementknoten), und es dann an die vorhandenen Elemente anhängen.

Beispiele

<div id="d1">
<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("d1");
element.appendChild(para);
</script>

Versuchen »