После того, как мы с вами научились выбирать элементы, настало время что-нибудь с ними сделать.
Давайте первое, что мы поучимся делать, это изменять HTML-содержимое этих выбранных элементов.
Давайте, к примеру, возьмем заголовок h1, у которого имеется атрибут id = test.
<h1 id="test">Заголовок</h1>
Предположим, что у нас стоит задача изменить содержимое этого элемента с "Заголовок" на какое-то произвольное содержимое.
В Javascript есть специальное свойство, которое позволяет менять внутреннее html-содержимое выбранного элемента и это свойство называется innerHTML. Дословный перевод как "внутренний html".
Для того, чтобы применить это свойство, сначала нужно выбрать тот элемент, с которым мы хотим поработать. Именно поэтому в прошлом видео столько внимания уделялось именно выборке элементов.
Теперь, когда мы научились выбирать элементы, мы можем с ними поработать. Поизменять их, подобавлять к ним другие элементы и.т.д.
Давайте выберим элемент с атрибутом id = test.
document.getElementById('test').innerHTML = 'Тест';
К выбранному элементу через знак точки мы добавили свойство innerHTML, которые позволит поменять внутреннее содержимое элемента. Через знак равно просто указываем то текстовое содержимое, которое должно быть у элемента.
В случае если нужно не заменять содержимое документа, а "приклеить" к предыдущему HTML-содержимому какой-то новый контент, можно воспользоваться такой командой.
document.getElementById('test').innerHTML += 'Тест';
Нужно просто добавить знак "+" перед знаком равно. Это оператор означает, что мы "приклеиваем" новое содержимое к тому, что уже имеется.
Добавлять с помощью свойства innerHTML мы можем не только какое-то текстовое содержимое, но также можно добавить какие-то HTML-тэги.
Например,
document.getElementById('test').innerHTML += '<span style="color: red">Тест</span>';
Имейте ввиду, что с помощью свойства innerHTML добавляется не просто какой-то текст, но также есть возможность добавлять HTML-тэги.
Вот такое полезное свойство.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти
Или зарегистрируйтесь через социальные сети: