Иллюстрированный самоучитель по созданию сайтов

Использование других свойств при работе с текстом

Помимо рассмотренного здесь свойства innerHTML, каждый элемент веб-страницы имеет еще три похожих свойства:

• innerText – то же, что и innerHTML, однако не может содержать HTML теги;
• outerHTML – то же, что и innerHTML, но включает в себя открывающий и закрывающий теги данного элемента, а также вложенные элементы;
• и, наконец, outerText – то же, что и outerHTML, однако не может содержать HTML-tens.

Другими словами, свойства innerText и innerHTML каждого элемента содержат только внутренний текст этого элемента, а свойства outerText и outerHTML – весь текст элемента, включая вложенные элементы и теги самого элемента. При этом innerText и outerText не содержат HTML-форматирования, innerHTML и outerHTML могут его содержать. Из всех этих свойств у начина ющих обычно вызывает вопросы только outerText. Однако оно используется довольно редко. Изменив его, можно практически убрать со страницы весь элемент.

Кроме того, существуют удобные методы для вставки текста и HTML-tens на страницу. Они называются insertAdjacentText и insertAdjacentHTML. Давайте рассмотрим такой пример. Допустим, мы хотим, чтобы на “домашней странице Сергея Сергеева” через минуту после нажатия на любую из наших мнимых “гиперссылок” и, соответственно, отображения текста одного из рассказов, перед ним появлялась красная надпись “Ну что, нравится?”

Потом к ней можно еще добавить разные кнопки типа ДА, НЕТ, НЕ ОЧЕНЬ, и связать с ними еще какие-либо действия, например, никогда больше не отображать рассказ, который не понравился. Однако сейчас давайте добавим только надпись.

Добавление дополнительных надписей

Для этого можно сделать следующее. Определим соответствующий стиль.

В нашем примере для запроса к пользователю мы используем тег <Н3>. После этого вставим нашу надпись таким образом:

Здесь используется метод insertAdjacentHTML, что позволяет вставлять не только текст, но и HTML-теги. Аргумент AfterBegin означает, что вставляемый код будет помещен в начало блока <DIV ID='rasskaz'>. Если бы мы написали BeforeEnd, то код был бы вставлен в конец блока. Кстати, методы lnsertAdjacentText и insertAdjacentHTML позволяют вставить текст (и HTML-код) не только внутрь какого-либо элемента, но и непосредственно перед и им или после него! Для этого используются аргументы BeforeBegin и, соответственно, AfterEnd. Как вы уже поняли, в качестве второго аргумента используется строка с текстом или HTML-кодом, который надо вставить.

Остальное уже просто. Добавим в каждую функцию отображения текста при введенную выше строку в сочетании с установкой таймера – setTimeout:

Правда, это еще не все. Если оставить страницу в таком виде, то таймер включит метод добавления текста через минуту после щелчка на мнимой гиперссылке, даже если пользователь за это время успеет щелкнуть на другой, а это нами не задумывалось. Поэтому во время щелчка на каждой мнимой гиперссылке следует останавливать предыдущий таймер. Для этого достаточно определить глобальную переменную:

И присвоить ей значение запущенного таймера:

Тогда для его остановки достаточно будет написать следующее:

В тот момент таймер будет остановлен.