Изменение HTML с помощью JavaScript HTML DOM

HTML DOM позволяет JavaScript изменять содержимое HTML элементов.

изменить поток вывода HTML

JavaScript может создавать динамическое HTML содержимое:

В JavaScript,document.write() Он может быть использован для прямого ввода HTML в поток вывода:

Пример

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

Попробуйте сами

Никогда не используйте document.write() после загрузки документа document.write(). Это заменит документ.

изменить HTML содержимое

Самый простой способ изменить содержимое HTML документа - это использовать innerHTML атрибут.

Чтобы изменить содержимое HTML элемента, используйте эту грамматику:

document.getElementById(id).innerHTML = новый текст

Этот пример изменяет <p> Содержимое элемента:

Пример

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

Попробуйте сами

Объяснение примера:

  • Верхний HTML документ содержит элемент <p> с id="p1"
  • Мы используем HTML DOM для получения этого элемента с id="p1"
  • JavaScript изменяет содержимое этого элемента (innerHTML) на "Hello Kitty!"

Этот пример изменяет <h1> Содержимое элемента:

Пример

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

Попробуйте сами

Объяснение примера:

  • Верхний HTML содержит элемент <h1> с id="header"
  • Мы использовали HTML DOM для получения элемента с id="header"
  • JavaScript изменяет содержимое этого элемента (innerHTML)

Изменение значения атрибута

Чтобы изменить значение атрибута HTML, используйте следующий синтаксис:

document.getElementById(id).атрибут = новое значение

Этот пример изменяет <img> элемента src Значение атрибута:

Пример

<!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"