JavaScript HTML DOM - Зміна HTML
HTML DOM дозволяє JavaScript змінювати вміст елементів HTML.
Зміна вмісту HTML
Найпростіший спосіб змінити вміст елемента HTML — це використати властивість innerHTML.
Щоб змінити вміст елемента HTML, використовуйте цей синтаксис:
document.getElementById(id).innerHTML = new HTML
Цей приклад змінює вміст елемента <p>:
Приклад
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Спробуйте самі »
Пояснення прикладу:
- Документ HTML вище містить елемент
<p>ізid="p1" - Ми використовуємо HTML DOM, щоб отримати елемент
id="p1" - JavaScript змінює вміст (
innerHTML) цього елемента на "New text!"
Цей приклад змінює вміст елемента <h1>:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Спробуйте самі »
Пояснення прикладу:
- Документ HTML вище містить елемент
<h1>ізid="id01" - Ми використовуємо HTML DOM, щоб отримати елемент
id="id01" - JavaScript змінює вміст (
innerHTML) цього елемента на "New Heading"
Зміна значення атрибута
Щоб змінити значення атрибута HTML, використовуйте цей синтаксис:
document.getElementById(id).attribute = new value
Цей приклад змінює значення атрибута src елемента <img>:
Приклад
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Спробуйте самі »
Пояснення прикладу:
- Документ HTML вище містить елемент
<img>ізid="myImage" - Ми використовуємо HTML DOM, щоб отримати елемент
id="myImage" - JavaScript змінює атрибут
srcцього елемента з "smiley.gif" на "landscape.jpg"
Динамічний вміст HTML
JavaScript може створювати динамічний вміст HTML:
Приклад
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date(); </script>
</body>
</html>
Спробуйте самі »
document.write()
У JavaScript document.write() можна використовувати для запису безпосередньо в вихідний потік HTML:
Приклад
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Спробуйте самі »
Ніколи не використовуйте document.write() після завантаження документа. Це перезапише документ.
