JavaScript HTML DOM - Änderungen an HTML

HTML DOM ermöglicht es JavaScript, den Inhalt von HTML-Elementen zu ändern.

Ändern des HTML-Ausgabestroms

JavaScript kann dynamischen HTML-Inhalt erstellen:

In JavaScript:document.write() Kann verwendet werden, um direkt in den HTML-Ausgabestrom zu schreiben:

Beispiel

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Probieren Sie selbst aus

Verwenden Sie niemals document.write() nach dem Laden des Dokuments document.write(). Dies wird das Dokument überschreiben.

Ändern des HTML-Inhalts

Die einfachste Methode, den Inhalt eines HTML-Dokuments zu ändern, ist innerHTML Eigenschaft.

Um den Inhalt eines HTML-Elements zu ändern, verwenden Sie diese Syntax:

document.getElementById(id).innerHTML = neuer Text

Dieses Beispiel ändert <p> Inhalt des Elements:

Beispiel

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Probieren Sie selbst aus

Beispiel-Erklärung:

  • Das obige HTML-Dokument enthält das <p>-Element mit id="p1"
  • Wir verwenden das HTML DOM, um das Element mit id="p1" zu erhalten
  • JavaScript ändert den Inhalt des Elements (innerHTML) in "Hello Kitty!"

Dieses Beispiel ändert <h1> Inhalt des Elements:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Probieren Sie selbst aus

Beispiel-Erklärung:

  • Das obige HTML enthält ein <h1>-Element mit id="header"
  • Wir haben das HTML DOM verwendet, um das Element mit id="header" zu erhalten
  • JavaScript ändert den Inhalt dieses Elements (innerHTML)

Ändern Sie den Wert des Attributes

Um den Wert eines HTML-Attributs zu ändern, verwenden Sie die folgende Syntax:

document.getElementById(id).Attribut = neuer Wert

Dieses Beispiel ändert <img> des Elements src Wert der Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Probieren Sie selbst aus

Beispiel-Erklärung:

  • Der obige HTML-Dokument enthält ein <img>-Element mit id="myImage"
  • Wir verwenden HTML DOM, um das Element mit id="myImage" zu erhalten
  • JavaScript ändert die src-Attribut dieses Elements von "smiley.gif" in "landscape.jpg"