Как вы уже знаете, переменная, содержащая ссылку на DOM элемент, представляет собой объект со своими свойствами. Эти свойства можно прочитывать и записывать.
Первым свойством, которое мы изучим, является
свойство innerHTML, позволяющее прочитывать
текст DOM элементов (то есть текст тегов).
Давайте посмотрим, как оно работает. Пусть
у нас есть переменная elem, содержащая ссылку
на какой-то элемент. Тогда с помощью elem.innerHTML
мы сможем прочитать текст этого элемента.
Давайте посмотрим на практическом примере. Пусть у нас есть абзац и кнопка:
<p id="elem">text</p>
<input id="button" type="submit">
Получим ссылки на абзац и кнопку в соответствующие переменные:
let button = document.querySelector('#button');
let elem = document.querySelector('#elem');
Выведем по нажатию на кнопку текст абзаца на экран:
button.addEventListener('click', function() {
alert(elem.innerHTML);
});
Даны два абзаца, содержащие своим текстом какие-то числа, и кнопка. По нажатию на кнопку выведите на экран сумму хранящихся чисел.
Даны два абзаца и две кнопки. Пусть нажатие на первую кнопку выводит текст первого абзаца, а нажатие на вторую кнопку - текст второго абзаца.
Запись
Свойство innerHTML позволяет не только
прочитывать, но и записывать текст. Давайте
для примера по нажатию на кнопку запишем
в наш абзац какой-нибудь текст:
button.addEventListener('click', function() {
elem.innerHTML = '!!!';
});
Дан абзац и две кнопки. По нажатию на первую
кнопку запишите в абзац слово 'привет',
а по нажатию на вторую кнопку - слово 'пока'.
Даны 3 абзаца с текстом. По нажатию
на первый абзац запишите в его текст число
1, по нажатию на второй абзац запишите
в его текст число 2, а по нажатию
на третий - запишите в его текст число 3.
Дан абзац и кнопка. В абзаце записано какое-то число. По нажатию на кнопку возведите значение абзаца в квадрат и запишите его обратно.
Дан абзац с числом и кнопка. По нажатию на кнопку прибавьте к значению абзаца единицу и запишите полученное число обратно.
Дан абзац с текстом и кнопка. По нажатию на кнопку запишите в конец текста абзаца восклицательный знак.
Модифицируйте предыдущую задачу так, чтобы восклицательный знак записывался не в конец текста, а в начало.
Запись тегов
Можно записывать не только обычный текст, но и текст с тегами. В таком случае теги будут восприняты браузером как команды. В следующем примере мы запишем в элемент жирный текст:
button.addEventListener('click', function() {
elem.innerHTML = '<b>жирный текст</b>';
});
Дан абзац и кнопка. По нажатию на кнопку
запишите в абзац текст '<i>hello</i>'.
Дан абзац с текстом и кнопка. По нажатию
на кнопку прочитайте текст абзаца, оберните
этот текст в теги <b> и запишите
новый текст обратно в абзац.