JavaScript DOM HTML

Obsah

HTML DOM umožňuje JavaScriptu měnit obsah prvků HTML.

Změna obsahu HTML

Nejjednodušší způsob, jak upravit obsah prvku HTML, je pomocí vlastnosti innerHTML.

Chcete-li změnit obsah prvku HTML, použijte tuto syntaxi:

document.getElementById(id).innerHTML = new HTML

Tento příklad změní obsah prvku <p>:

Příklad

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript can Change HTML</h2>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Vysvětlený příklad:

Výše uvedený dokument HTML obsahuje prvek <p> s id="p1"
K získání prvku s id="p1" používáme HTML DOM
JavaScript změní obsah (innerHTML) tohoto prvku na „Nový text!"

Tento příklad změní obsah prvku <h1>:

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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html>

Vysvětlený příklad:

Výše uvedený dokument HTML obsahuje prvek <h1> s id="id01"
K získání prvku s id="id01" používáme HTML DOM
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 prvku <img>:

Příklad

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

Vysvětlený příklad:

Výše uvedený dokument HTML obsahuje prvek <img> s id="myImage"
K získání prvku s id="myImage" používáme HTML DOM
JavaScript změní atribut src tohoto prvku z "smiley.gif" na "landscape.jpg".

Dynamický obsah HTML

JavaScript může vytvářet dynamický obsah HTML:

Příklad

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

document.write()

V JavaScriptu lze k přímému zápisu do HTML použít document.write() výstupní proud:

Příklad

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<p>Bla, bla, bla</p>

<script>
document.write(Date());
</script>

<p>Bla, bla, bla</p>

</body>
</html>

Po načtení dokumentu nikdy nepoužívejte document.write(). Bude přepsat dokument.