Как вывести текст в JavaScript
На этом уроке мы рассмотрим, как вывести текст в JavaScript на экран, с двумя разными целями: заменить на другой и добавить к существующему.
Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.
<div id="text_out">
<p id="text_change">Заменить текст</p>
<hr>
<button onclick="text_out()" class="btn btn-danger">Заменить текст</button>
</div>
Заменить текст в JavaScript
Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.
function text_out(){
}
Для получения параграфа для работы:
Объявим переменную:
var p;
Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.
p = document.getElementById('text_change');
Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо "Заменить текст", выведем внутри p новую запись:
p.innerHTML = 'Текст заменили';
После клика по кнопке, замена произошла успешно.
Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.
Что будет, если кавычки оставить пустыми?
p.innerHTML = '';
Тогда параграф очистится, текущая запись удалится, а новая не вставится.
Добавить текст в JavaScript
Как добавить новый текст к уже существующему, не удаляя текущий?
p.innerHTML += ' <i>на сайте</i>';
Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.
Эти две записи равнозначны.
p.innerHTML = p.innerHTML + 'на сайте';
Берем, что имеется, прибавляем что-нибудь новое и записываем заново.
Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами <i>, а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.
p.innerHTML += ' <i>на сайте</i>';
Теги выводятся, но не обрабатываются.
p.innerText += ' <b>на сайте</b>';
Все действия, которые мы производили до этого, приводят к тому, что запись выводится между парными тегами. Однако было бы удобно иметь возможность более гибко выводить дополнительную информацию по отношению к элементу. Такой способ есть и выглядит следующим образом.
p.insertAdjacentHTML('beforeBegin','на сайте');
Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:
- первый параметр – где вывести информацию
- второй параметр – это что вывести
Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.
- beforeBegin - перед открывающим тегом
- afterBegin - после открывающего тега
- beforeEnd – перед закрывающим тегом
- afterEnd – после закрывающим тегом
Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.
Присвоим параграфу "Замена" всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.
p.outerHTML = '<div id="text_change">Замена всего</div>';
После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.
В инспекторе кода, мы увидим уже новый код, на месте старого.
<div id="text_change">Замена всего</div>
See the Pen Как вывести текст в JavaScript by porsake (@porsake) on CodePen.
-
Создано 02.01.2019 10:36:17
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.