Последние учебники веб-разработки
×

JS Руководство

JS ГЛАВНАЯ JS Введение JS Куда JS Вывод JS Синтаксис JS Заявления JS Комментарии JS переменные JS операторы JS арифметика JS присваивание JS Типы данных JS функции JS Объекты JS Объем JS Мероприятия JS Строки JS Методы струнных JS чисел JS Методы Number JS математический JS Даты JS Форматы даты JS Методы Дата JS Массивы JS Методы массивов JS Booleans JS Сравнения JS условия JS переключатель JS петля For JS В то время как Loop JS Ломать JS Тип преобразования JS RegExp JS ошибки JS отладка JS Подъемно JS Строгий режим JS Гид по стилю JS Лучшие практики JS Ошибки JS Представление JS Зарезервированные слова JS JSON

JS формы

Формы проверки Формы API

JS объект

Определения объектов Свойства объекта Методы объекта Прототипы объектов

JS функции

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

JS HTML DOM

DOM вступление DOM методы DOM Документ DOM элементы DOM HTML DOM CSS DOM Анимации DOM Мероприятия DOM EventListener DOM навигация DOM Вершины DOM Nodelist

JS браузер BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Примеры

JS Примеры JS HTML DOM JS HTML вход JS HTML Объекты JS HTML Мероприятия JS браузер JS викторина JS Резюме

JS Рекомендации

JavaScript Объекты HTML DOM Объекты


 

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


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


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

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

Дата:Вс 6 ноября 2016 19:23:35 GMT + 0800 (中国标准时间)

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

пример

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Попробуй сам "

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


Изменение HTML Content

Самый простой способ изменить содержимое 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 Header";
</script>

</body>
</html>
Попробуй сам "

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

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

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

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

document.getElementById(id).attribute=new value

Этот пример изменяет значение атрибута ГКЗ в <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"

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »