JavaScript HTML-DOM ändert HTML-Inhalt
HTML-DOM ermöglicht JavaScript, um die Inhalte des HTML-Elements zu ändern.
Ändern Sie den HTML-Ausgabestrom
JavaScript kann dynamische HTML-Inhalte zu erstellen:
Dasheutige Datum ist:
In JavaScript document.write () können direkt verwendet werden, um HTML-Inhalt in den Ausgabestream schreiben.
Beispiele
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Versuchen »
Nie document.write verwenden, nachdem das Dokument Laden beendet ist (). Dies überschreibt das Dokument. |
Ändern Sie den HTML-Inhalt
innerHTML- Eigenschaft Mit Der einfachste Weg, den HTML-Inhalt zu ändern.
Um den Inhalt des HTML-Elements zu ändern, verwenden Sie folgende Syntax:
document.getElementById(id).innerHTML=新的 HTML
Dieses Beispiel ändert den Inhalt des <p> Element:
Beispiele
<Html>
<Body>
<P id = "p1"> Hallo Welt! </ P>
<Script>
document.getElementById ( "P1") innerHTML- = "neuen Text !.";
</ Script>
</ Body>
</ Html>
<Body>
<P id = "p1"> Hallo Welt! </ P>
<Script>
document.getElementById ( "P1") innerHTML- = "neuen Text !.";
</ Script>
</ Body>
</ Html>
Versuchen »
Dieses Beispiel ändert den Inhalt des <h1> Element:
Beispiele
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
Versuchen »
Beispiele zu erklären:
- Die obige HTML-Dokument, das id = "header" des <h1> Element enthält
- Wir verwenden das HTML-DOM, um die ID zu bekommen = "header" Element
- JavaScript für dieses Element geändert Inhalt (innerHTML-)
Ändern Sie die HTML-Attribute
Um die Eigenschaften eines HTML-Elements zu ändern, verwenden Sie folgende Syntax:
document.getElementById(id).attribute=新属性值
In diesem Beispiel wird das Attribut src <img> Element:
Beispiele
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
Versuchen »
Beispiele zu erklären:
- Die obige HTML-Dokument, das id = "image" des <img> Element enthält
- Wir verwenden das HTML-DOM die ID zu bekommen = "image" Element
- ändern Sie JavaScript um die Eigenschaften dieses Elements (die "smiley.gif" auf "landscape.jpg")