JavaScript DOM HTML

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

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

Ändern von HTML-Inhalten

Der einfachste Weg, den Inhalt eines HTML-Elements zu ändern, ist die Verwendung der Eigenschaft innerHTML.

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

document.getElementById(id).innerHTML = new HTML

In diesem Beispiel wird der Inhalt eines <p>-Elements geändert:

Beispiel

<html>
<body>

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

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

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript can Change HTML</h2>

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

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

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Beispiel erklärt:

  • Das obige HTML-Dokument enthält ein <p>-Element mit id="p1"

  • Wir verwenden das HTML-DOM, um das Element mit id="p1" abzurufen

  • Ein JavaScript ändert den Inhalt (innerHTML) dieses Elements in „Neu“. Text!"

Dieses Beispiel ändert den Inhalt eines <h1>-Elements:

Beispiel

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html>

Beispiel erklärt:

  • Das obige HTML-Dokument enthält ein <h1>-Element mit id="id01"

  • Wir verwenden das HTML-DOM, um das Element mit id="id01" abzurufen

  • Ein JavaScript ändert den Inhalt (innerHTML) dieses Elements in „Neu“. Überschrift"

Den Wert eines Attributs ändern

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

document.getElementById(id).attribute = new value

In diesem Beispiel wird der Wert des src-Attributs eines <img>-Elements geändert:

Beispiel

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

Beispiel erklärt:

  • Das obige HTML-Dokument enthält ein <img>-Element mit id="myImage"

  • Wir verwenden das HTML-DOM, um das Element mit id="myImage" abzurufen

  • Ein JavaScript ändert das Attribut src dieses Elements von „smiley.gif“ in „landscape.jpg“.

Dynamischer HTML-Inhalt

JavaScript kann dynamische HTML-Inhalte erstellen:

Beispiel

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

document.write()

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

Beispiel

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p>Bla, bla, bla</p>

<script>
document.write(Date());
</script>

<p>Bla, bla, bla</p>

</body>
</html>

Verwenden Sie niemals document.write(), nachdem das Dokument geladen wurde. Es wird Überschreiben Sie das Dokument.