JavaScript HTML DOM - muuta HTML

HTML DOM mahdollistaa JavaScriptin HTML-elementtien sisällön muuttamisen.

muuttaa HTML-lähtövirtaa

JavaScript voi luoda dynaamista HTML-sisältöä:

JavaScriptissädocument.write() Voit käyttää sitä suoraan HTML-lähtövirtaan kirjoittamiseen:

Esimerkki

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

Kokeile itse

Älä koskaan käytä document.write()。Tämä korvaa dokumentin.

muuttamalla HTML-sisältöä

Muuta HTML-dokumentin sisältöä helpoiten innerHTML ominaisuus.

Jos haluat muuttaa HTML-elementin sisältöä, käytä tätä syntaksia:

document.getElementById(id).innerHTML = uusi teksti

Tämä esimerkki muuttaa <p> Elementin sisältö:

Esimerkki

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

Kokeile itse

Esimerkki selitetään:

  • Yllä oleva HTML-dokumentti sisältää ID:nä "p1" olevan <p>-elementin
  • Käytimme HTML DOM:ää elementin hakemiseen, jonka ID on "p1"
  • JavaScript muuttaa kyseisen elementin sisältöä (innerHTML) arvoksi "Hello Kitty!"

Tämä esimerkki muuttaa <h1> Elementin sisältö:

Esimerkki

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

Kokeile itse

Esimerkki selitetään:

  • Yllä oleva HTML sisältää ID:nä "header" olevan <h1>-elementin
  • Käytimme HTML DOM:ää elementin hakemiseen, jonka ID on "header"
  • JavaScript muuttaa tämän elementin sisältöä (innerHTML)

Muuta ominaisuuden arvoa

Jos haluat muuttaa HTML-ominaisuuden arvoa, käytä seuraavaa syntaksia:

document.getElementById(id).ominaisuus = uusi arvo

Tämä esimerkki muuttaa <img> elementin src Arvon ominaisuus:

Esimerkki

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

Kokeile itse

Esimerkki selitetään:

  • Yllä oleva HTML-dokumentti sisältää id="myImage" elementin <img>-elementtinä
  • Käytämme HTML-DOMia saadaksemme id="myImage" elementin
  • JavaScript muuttaa tämän elementin src-ominaisuuden "smiley.gif":sta "landscape.jpg":ksi