JavaScript HTML DOM - Изменение HTML

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

Изменение выходного потока HTML

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

Сегодняшняя дата:

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

Примеры

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

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

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

Изменение содержимого 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>

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

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

Примеры

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New heading";
</script>

</body>
</html>

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

Пояснение к примеру:

  • HTML-документ выше содержит элемент <h1> с id="header"

  • Мы используем HTML DOM, чтобы получить элемент с id="header"

  • JavaScript изменяет содержимое этого элемента (innerHTML)

Изменение HTML-атрибутов

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

document.getElementById(id).attribute=new attribute value

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

Примеры

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif.html">

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

</body>
</html>

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

Пояснение к примеру:

  • Приведённый выше HTML-документ содержит элемент <img> с id="image"
  • Мы используем HTML DOM, чтобы получить элемент с id="image"
  • JavaScript изменяет атрибут этого элемента (меняет "smiley.gif" на "landscape.jpg")
Другие расширения