мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Работа с текстом тега на JavaScript

Как вы уже знаете, переменная, содержащая ссылку на 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> и запишите новый текст обратно в абзац.