Меняем html-содержимое выбранного элемента.

После того, как мы с вами научились выбирать элементы, настало время что-нибудь с ними сделать.

Давайте первое, что мы поучимся делать, это изменять 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-тэги. 

Вот такое полезное свойство.