How to display JavaScript variables in a HTML page without document.write
I am trying to display some JavaScript variable on my HTML page.
I was first using document.write() but it use to overwrite the current page when the function was called.
After searching around, the general consensus was that document.write() isn’t liked very much. What are the other options?
I found a page suggesting using .innerHTML but that was written in 2005.
A jsFiddle illustrating my problem http://jsfiddle.net/xHk5g/
9 Answers 9
Element.innerHTML is pretty much the way to go. Here are a few ways to use it:
JavaScript
If you just want to update a portion of a <div> I usually just add an empty element with a class like value or one I want to replace the contents of to the main <div> . e.g.
Then I’d use some code like this:
Then the HTML/DOM would now contain:
Full example. Click run snippet to try it out.
You can use javascript to access elements on the page and modify their contents. So for example you might have a page with some HTML markup like so:
You can use javascript to change the content like so.
You can also look at using the JQuery javascript library for DOM manipulation, it has some great features to make things like this very easy.
For example, with JQuery, you could do this to acheive the same result.
Based on this example you provided in your post. The following JQuery would work for you:
Using a P tag like this however is not recommended. You would ideally want to use an element with a unique ID so you can ensure you are selecting the correct one with JQuery.
Вывод текста в документ в JavaScript
Средствами JavaScript можно управлять тегами HTML страницы, например, выводить в них текст. Этому мы будем учиться позднее, когда будем проходить раздел, посвященный работе с DOM.
Иногда, однако, в отладочных целях требуется вывести какой-нибудь текст в окно браузера. Это делается с помощью команды document.write . Посмотрим работу с ней на примерах.
Выведем числовое значение:
Выведем какой-нибудь текст:
Выведем текст, заключенный в теги:
Выведем текст из переменной:
Заключим текст из переменной в теги:
Выведем текст с два ряда:
Выведем много текстов в колонку:
Можно и вот так:
Выведите в окно браузера какой-нибудь текст.
Выведите в окно браузера какой-нибудь текст, сделав его курсивным.
Выведите текст из переменной в окно браузера так, чтобы он был курсивным.
Как вывести текст в 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.
Как вывести переменную из js в html
В самом простом случае, сначала необходимо в html документе дать элементу в который будем помещать данные — id или класс. Например:
Затем, ниже объявленного искомого объекта, в теле тега <script> необходимо с помощью JavaScript "получить" объект и занести в свойство textContent необходимые данные.