Как вывести текст в JavaScript
На этом уроке мы рассмотрим, как вывести текст в JavaScript на экран, с двумя разными целями: заменить на другой и добавить к существующему.
Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.
Заменить текст в JavaScript
Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.
Для получения параграфа для работы:
Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.
Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо «Заменить текст», выведем внутри p новую запись:
p.innerHTML = 'Текст заменили';
После клика по кнопке, замена произошла успешно.
Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.
Что будет, если кавычки оставить пустыми?
Тогда параграф очистится, текущая запись удалится, а новая не вставится.
Добавить текст в JavaScript
Как добавить новый текст к уже существующему, не удаляя текущий?
Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.
Эти две записи равнозначны.
p.innerHTML = p.innerHTML + 'на сайте';
Берем, что имеется, прибавляем что-нибудь новое и записываем заново.
Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами <i>, а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.
Теги выводятся, но не обрабатываются.
Все действия, которые мы производили до этого, приводят к тому, что запись выводится между парными тегами. Однако было бы удобно иметь возможность более гибко выводить дополнительную информацию по отношению к элементу. Такой способ есть и выглядит следующим образом.
Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:
- первый параметр – где вывести информацию
- второй параметр – это что вывести
Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.
- beforeBegin — перед открывающим тегом
- afterBegin — после открывающего тега
- beforeEnd – перед закрывающим тегом
- afterEnd – после закрывающим тегом
Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.
Присвоим параграфу «Замена» всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.
После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.
Вывод текста в документ в JavaScript
Средствами JavaScript можно управлять тегами HTML страницы, например, выводить в них текст. Этому мы будем учиться позднее, когда будем проходить раздел, посвященный работе с DOM.
Иногда, однако, в отладочных целях требуется вывести какой-нибудь текст в окно браузера. Это делается с помощью команды document.write . Посмотрим работу с ней на примерах.
Выведем числовое значение:
Выведем какой-нибудь текст:
Выведем текст, заключенный в теги:
Выведем текст из переменной:
Заключим текст из переменной в теги:
Выведем текст с два ряда:
Выведем много текстов в колонку:
Можно и вот так:
Выведите в окно браузера какой-нибудь текст.
Выведите в окно браузера какой-нибудь текст, сделав его курсивным.
Выведите текст из переменной в окно браузера так, чтобы он был курсивным.
JavaScript Output
JavaScript can "display" data in different ways:
- Writing into an HTML element, using innerHTML .
- Writing into the HTML output using document.write() .
- Writing into an alert box, using window.alert() .
- Writing into the browser console, using console.log() .
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p >
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
Changing the innerHTML property of an HTML element is a common way to display data in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write() :
Example
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
Using document.write() after an HTML document is loaded, will delete all existing HTML:
Example
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
The document.write() method should only be used for testing.
Using window.alert()
You can use an alert box to display data:
Example
You can skip the window keyword.
In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:
Example
Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
You will learn more about debugging in a later chapter.
Example
JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print the content of the current window.
Example
<button onclick="window.print()">Print this page</button>
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Функции вывода
Во время написания программы, а также при её отладке часто возникает необходимость увидеть, как работает программа. Нужно узнать, доходит ли выполнение программы до определённого места и какие значения имеют переменные в этот момент. Для этого существуют функции вывода, которые рассмотрены в данной теме.
Функция alert()
Функция alert() выводит на экран окно с сообщением. Текст сообщения всегда пишется в кавычках. Все функции вывода могут выводить не только текст, но и значения переменных. Пример:
Особенность этой функции заключается в том, что она приостанавливает работу программы. Когда выполнение программы доходит до функции alert() , появляется окно и работа программы прерывается. А когда пользователь нажимает кнопку OK, окно изчезат, а программа продолжает работу. Иногда эта особенность бывает полезна. Она позволяет не только вывести сообщение, но и увидеть, как выглядит страница на данном этапе выполнения программы. Однако, если нужно вывести много сообщений, то использование функции alert() становится неудобным. Ведь при каждом выводе программа прерывается и нужно нажимать кнопку OK. В этих случаях используются другие способы вывода данных.
Метод document.write()
Метод document.write() добавляет текст на страницу. Это может быть не просто текст, но и HTML тэги. Они будут работать. Однако, не рекомендуется использовать этот метод для добавления элементов страницы. Они могут отображаться неправильно. Для создания элементов применяются другие методы, которые рассмотрены в этом учебнике. А document.write() используется, в основном, для отслеживания работы программы. Пример:
Метод console.log()
Консоль браузера — это полезный инструмент отладки страницы, в том числе, скриптов. Он позволяет получить важную информацию о работе скрипта. Удобнее всего консоль сделана в браузере FireFox. Она находится в Инструментах разработчика. Чтобы их открыть, зайдите в главное меню браузера и выберите «Другие интструменты». Для быстрого открытия Инструментов разработчика можно добавить кнопку в панель инструментов.