JavaScript HTML DOM - Změna HTML
HTML DOM umožňuje JavaScriptu měnit obsah prvků HTML.
Změna obsahu HTML
Nejjednodušší způsob, jak upravit obsah prvku HTML, je pomocí innerHTML
vlastnosti.
Chcete-li změnit obsah prvku HTML, použijte tuto syntaxi:
document.getElementById(id).innerHTML = new HTML
Tento příklad změní obsah <p>
prvku:
Příklad
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Vysvětlený příklad:
- Výše uvedený dokument HTML obsahuje
<p>
prvek sid="p1"
- K získání prvku používáme HTML DOM
id="p1"
- JavaScript změní obsah (
innerHTML
) tohoto prvku na "Nový text!"
Tento příklad změní obsah <h1>
prvku:
Příklad
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Vysvětlený příklad:
- Výše uvedený dokument HTML obsahuje
<h1>
prvek sid="id01"
- K získání prvku používáme HTML DOM
id="id01"
- JavaScript změní obsah (
innerHTML
) tohoto prvku na "Nový nadpis"
Změna hodnoty atributu
Chcete-li změnit hodnotu atributu HTML, použijte tuto syntaxi:
document.getElementById(id).attribute = new value
Tento příklad změní hodnotu atributu src <img>
prvku:
Příklad
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Vysvětlený příklad:
- Výše uvedený dokument HTML obsahuje
<img>
prvek sid="myImage"
- K získání prvku používáme HTML DOM
id="myImage"
- JavaScript změní
src
atribut tohoto prvku z „smiley.gif“ na „landscape.jpg“
Dynamický obsah HTML
JavaScript může vytvářet dynamický obsah HTML:
Datum: Ne 30. ledna 2022 00:36:00 GMT+0000 (koordinovaný světový čas)
Příklad
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write()
V JavaScriptu document.write()
lze použít k přímému zápisu do výstupního proudu HTML:
Příklad
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Nikdy nepoužívejte document.write()
po vložení dokumentu. Dojde k přepsání dokumentu.