JavaScript HTML DOM - Zmiana HTML
HTML DOM umożliwia JavaScriptowi zmianę zawartości elementów HTML.
Zmiana treści HTML
Najłatwiejszym sposobem modyfikacji zawartości elementu HTML jest użycie innerHTMLwłaściwości.
Aby zmienić zawartość elementu HTML, użyj następującej składni:
document.getElementById(id).innerHTML = new HTML
Ten przykład zmienia zawartość <p>elementu:
Przykład
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Przykład wyjaśniony:
- Powyższy dokument HTML zawiera
<p>element zid="p1" - Używamy HTML DOM, aby uzyskać element z
id="p1" - JavaScript zmienia zawartość (
innerHTML) tego elementu na „Nowy tekst!”
Ten przykład zmienia zawartość <h1>elementu:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Przykład wyjaśniony:
- Powyższy dokument HTML zawiera
<h1>element zid="id01" - Używamy HTML DOM, aby uzyskać element z
id="id01" - JavaScript zmienia zawartość (
innerHTML) tego elementu na „Nowy nagłówek”
Zmiana wartości atrybutu
Aby zmienić wartość atrybutu HTML, użyj następującej składni:
document.getElementById(id).attribute = new value
Ten przykład zmienia wartość atrybutu src <img>elementu:
Przykład
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Przykład wyjaśniony:
- Powyższy dokument HTML zawiera
<img>element zid="myImage" - Używamy HTML DOM, aby uzyskać element z
id="myImage" - JavaScript zmienia
srcatrybut tego elementu z „smiley.gif” na „landscape.jpg”
Dynamiczna zawartość HTML
JavaScript może tworzyć dynamiczną zawartość HTML:
Data : sobota 29 stycznia 2022 23:28:07 GMT+0000 (uniwersalny czas koordynowany)
Przykład
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
dokument.zapis()
W JavaScript document.write()może być używany do pisania bezpośrednio do strumienia wyjściowego HTML:
Przykład
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Nigdy nie używaj document.write()po załadowaniu dokumentu. Nadpisze dokument.