Die HTML-DOM erlaubt JavaScript, um die Inhalte der HTML-Elemente zu ändern.
Ändern der HTML-Output Stream
JavaScript kann dynamische HTML-Inhalte zu erstellen:
Datum:Sun 6. November 2016 19.23.35 GMT + 0800 (中国标准时间)
In JavaScript document.write() kann direkt an den HTML - Ausgabe Stream zu schreiben verwendet werden:
Beispiel
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Versuch es selber " Verwenden Sie niemals document.write() , nachdem das Dokument geladen wird. Es wird das Dokument überschrieben.
Ändern HTML-Inhalt
Der einfachste Weg , um den Inhalt eines HTML - Elements zu ändern , ist durch die Verwendung von innerHTML Eigenschaft.
Um den Inhalt eines HTML-Elements zu ändern, verwenden Sie folgende Syntax:
document.getElementById(id).innerHTML = new HTML
In diesem Beispiel wird der Inhalt eines <p> Element:
Beispiel
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Versuch es selber " Dieses Beispiel ändert den Inhalt eines <h1> Element:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Versuch es selber " Erklärt Beispiel:
- Das HTML - Dokument oben enthält ein <h1> Element mit id="header"
- Wir verwenden das HTML - DOM das Element mit bekommen id="header"
- Ein JavaScript ändert den Inhalt (innerHTML) dieses Elements
Ändern Sie den Wert eines Attributs
Um den Wert eines HTML-Attribut zu ändern, verwenden Sie folgende Syntax:
document.getElementById(id).attribute=new value
In diesem Beispiel wird der Wert des src - Attribut eines <img> Element:
Beispiel
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Versuch es selber " Erklärt Beispiel:
- Das HTML - Dokument oben enthält ein <img> Element mit id="myImage"
- Wir verwenden das HTML - DOM das Element mit zu bekommen id="myImage"
- Ein JavaScript ändert das src - Attribut dieses Elements von "smiley.gif" auf "landscape.jpg"
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »