JavaScript HTML DOM zmienia zawartość HTML
HTML DOM pozwala JavaScript, żeby zmienić zawartość elementu HTML.
Zmiana strumienia wyjściowego HTML
JavaScript może stworzyć dynamiczną zawartość HTML:
Dzisiejsza data to:
W JavaScript document.write () może być stosowany do bezpośredniego Zapis zawartości HTML do strumienia wyjściowego.
Przykłady
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Spróbuj »
 | Nigdy nie należy używać document.write po zakończeniu ładowania dokumentu (). To przesłania dokumentu. |
|---|
Zmień zawartość HTML
Korzystanie z właściwości innerHTML Najprostszym sposobem, aby zmodyfikować zawartość HTML.
Aby zmienić zawartość elementu HTML, należy użyć następującej składni:
document.getElementById(id).innerHTML=新的 HTML
Przykład ten zmienia zawartość elementu <p>:
Przykłady
<Html>
<Body>
<P id = "p1"> Hello World! </ P>
<Script>
document.getElementById ( "P1") innerHTML = "Nowy tekst !.";
</ Script>
</ Body>
</ Html>
<Body>
<P id = "p1"> Hello World! </ P>
<Script>
document.getElementById ( "P1") innerHTML = "Nowy tekst !.";
</ Script>
</ Body>
</ Html>
Spróbuj »
Ten przykład zmienia zawartość elementu <h1>:
Przykłady
<!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>
Spróbuj »
Przykłady wyjaśnić:
- Powyższy dokument HTML, który zawiera id = "header" w elemencie <h1>
- Używamy DOM HTML, aby uzyskać id = "header" Element
- JavaScript zmiany tego elementu treści (innerHTML)
Zmień atrybuty HTML
Aby zmienić właściwości elementu HTML, należy użyć następującej składni:
document.getElementById(id).attribute=新属性值
Ten przykład zmienia atrybut src elementu <img>:
Przykłady
<!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>
Spróbuj »
Przykłady wyjaśnić:
- Powyższy dokument HTML, który zawiera id = "obraz" elementu <img>
- Używamy DOM HTML, aby uzyskać id = "image" Element
- JavaScript zmienić właściwości tego elementu (dalej "smiley.gif" na "landscape.jpg")