САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
HTMLCSSJAVASCRIPTSQLPYTHONPHPBOOTSTRAPКАКW3.CSSJQUERYXMLЕЩЁФОРУМУПРАЖНЕНИЯСПРАВОЧНИК
×

JS Учебник

JS Главная JS Введение JS Установка JS Вывод JS Синтаксис JS Заявления JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS Область JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Формат даты JS Метод получения дат JS Методы набора... JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Отладчик JS Подъемный JS Строгий JS Ключевое слово this JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Доступ к объекту Конструкторы объекта Прототипы объекта Объект ECMAScript 5

JS Функции

Определение функции Параметры функции Вызов Функции Вызвать Функцию Применение функции Закрытие Функции

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель события DOM Навигация DOM Узлы DOM Коллекции DOM Список узлов

JS Браузера BOM

JS Окно JS Экран


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

❮ Назад Вперед ❯

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

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

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

Date:

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

Пример

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Попробуйте сами »

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

Изменение содержимого HTML

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

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

document.getElementById(id).innerHTML = новый HTML

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

Пример

<html>
<body>

<p id="p1">Привет мир!</p>

<script>
document.getElementById("p1").innerHTML = "Новый текст!";
</script>

</body>
</html>
Попробуйте сами »

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

  • Приведенный выше HTML документ содержит элемент <p> с id="p1"
  • Мы используем HTML DOM, чтобы получить элемент с помощью id="p1"
  • JavaScript изменяет содержимое (innerHTML) этого элемента, на "Новый текст!"

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

Пример

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Старый заголовок</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "Новый заголовок";
</script>

</body>
</html>
Попробуйте сами »

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

  • Приведенный выше HTML документ содержит элемент <h1> с id="id01"
  • Мы используем HTML DOM, чтобы получить элемент с помощью id="id01"
  • JavaScript изменяет содержимое (innerHTML) этого элемента, на "Новый заголовок"

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

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

document.getElementById(id).attribute = новое значение

В этом примере изменяется значение атрибута 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 DOM для изменения значения атрибута src изображения.

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

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

Начните упражнение

❮ Назад Вперед ❯