JavaScript HTML DOM - Zmiana HTML

HTML DOM pozwala JavaScript zmieniać zawartość elementów HTML.

Zmiana strumienia wyjściowego HTML

JavaScript może tworzyć dynamiczną zawartość HTML:

W JavaScriptie:document.write() Można użyć do bezpośredniego zapisu do strumienia wyjściowego HTML:

Przykład

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

Spróbuj sam

Nigdy nie używaj document.write(). To spowoduje zastąpienie dokumentu.

Zmiana zawartości HTML

Najprostszym sposobem na zmianę zawartości dokumentu HTML jest użycie innerHTML Atrybuty.

Aby zmodyfikować zawartość elementu HTML, użyj tej gramatyki:

document.getElementById(id).innerHTML = nowy tekst

W tym przykładzie zmieniono <p> Zawartość elementu:

Przykład

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

Spróbuj sam

Wyjaśnienie przykładu:

  • Powyższy dokument HTML zawiera element <p> o id="p1"
  • Użyliśmy HTML DOM do uzyskania tego elementu o id="p1"
  • JavaScript zmienia zawartość tego elementu (innerHTML) na "Hello Kitty!"

W tym przykładzie zmieniono <h1> Zawartość elementu:

Przykład

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

Spróbuj sam

Wyjaśnienie przykładu:

  • Powyższy HTML zawiera element <h1> o id="header"
  • Użyliśmy HTML DOM do uzyskania elementu o id="header"
  • JavaScript zmienia zawartość tego elementu (innerHTML)

Zmień wartość atrybutu

Aby zmienić wartość atrybutu HTML, użyj następującej gramatyki:

document.getElementById(id).atrybut = nowa wartość

W tym przykładzie zmieniono <img> elementu src Wartość atrybutu:

Przykład

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

Spróbuj sam

Wyjaśnienie przykładu:

  • Powyższy dokument HTML zawiera element <img> o id="myImage"
  • Używamy HTML DOM, aby uzyskać element o id="myImage"
  • JavaScript zmienia atrybut src tego elementu z "smiley.gif" na "landscape.jpg"