Javascript вывод document write

HTML DOM Document write()

Write some HTML elements directly to the HTML output:

document.write(«

Hello World!

Have a nice day!

«);

Using document.write() after a document is loaded, deletes all existing HTML:

Description

The write() method writes directly to an open (HTML) document stream.

Warning

The write() method deletes all existing HTML when used on a loaded document.

The write() method cannot be used in XHTML or XML.

Note

The write() method is most often used to write to output streams opened by the the open() method.

See Also:

Syntax

Parameters

Parameter	Description
exp1.	Optional. The output stream. Multiple arguments are appended to the document in order of occurrence.

Return Value

More Examples

Write a date object directly to the HTML ouput:

Open an output stream, add some HTML, then close the output stream:

document.open();
document.write(«

Hello World

«);
document.close();

Open a new window and write some HTML into it:

const myWindow = window.open();
myWindow.document.write(«

New Window

«);
myWindow.document.write(«

Hello World!

«);

The Difference Between write() and writeln()

The writeln( ) method is only useful when writing to text documents (type=».txt»).

Example

document.write(«Hello World!»);
document.write(«Have a nice day!»);
document.write(«
«);
document.writeln(«Hello World!»);
document.writeln(«Have a nice day!»);

Note

It makes no sense to use writeln() in HTML.

It is only useful when writing to text documents (type=».txt»).

Newline characters are ignored in HTML.

If you want new lines in HTML, you must use paragraphs or
:

Examples

document.write(«

Hello World!

«);
document.write(«

Have a nice day!

«);

Browser Support

document.write is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

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.

Источник

Вывод данных Javascript

У JavaScript есть несколько различных способов «отобразить» данные:

• Запись в HTML элемент при помощи свойства innerHTML.
• Запись в вывод HTML при помощи метода document.write().
• Запись в окно предупреждений при помощи метода window.alert().
• Запись в консоль браузера при помощи метода console.log().

Использование innerHTML

Чтобы получить доступ к HTML элементу, JavaScript должен воспользоваться методом document.getElementById(id). Атрибут id определяет идентификатор HTML элемента. Свойство innerHTML определяет выводимый HTML контент:

    
Моя веб-страница
 
Первый параграф
    

Изменение свойства innerHTML элемента HTML это обычный способ вывода данных в HTML.

Использование document.write()

В тестовых целях для вывода данных можно использовать метод document.write():

    
Моя веб-страница
 
Первый параграф
    

Следует помнить, что использование метода document.write() после полной загрузки HTML документа удалит весь существующий HTML код:

    
Моя веб-страница
 
Первый параграф
 Попробуй   

Метод document.write() следует использовать только для тестирования.

Использование window.alert()

Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():

    
Моя веб-страница
 
Первый параграф
    

Использование console.log()

Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():

Подробнее об отладке скриптов будет рассказано в следующих главах.

Источник

Всё только о JavaScript

document.write(arg1[, arg2[, arg3[, . ]]]) — метод, выводящий на страницу переданные ему аргументы. Аргументов может быть любое количество, и они могут быть любых типов, при выводе они преобразуются в строки.

Также существует функция document.writeln , которая аналогична document.write , но добавляет в конце своего вывода перевод строки.

Как работает document.write

document.write выводит свои аргументы после того тега script , в котором он был вызван. К примеру код

Обратите внимание: не после того тега script , в котором записано выражение document.write , а после того, в котором оно было вызвано. Следующий код

document.write работает только на этапе загрузки страницы, его нельзя вызывать в ответ на какое-нибудь событие. Если document.write вызвать после того, как страница загрузилась, результат во всех браузерах будет примерно одинаков — пустая страница и, возможно, тот текст, который был выведен последним document.write . Поэтому даже не пытайтесь использовать его в ответ на какие-то действия пользователя, только на этапе загрузки страницы.

Вывод скриптов

Как и любое другое содержимое, document.write может выводить и скрипты, которые тоже в свою очередь могут содержать document.write . Но нужно помнить: внедрённые в HTML скрипты не могут содержать внутри себя в явном виде строку . Нужно или разорвать этот тег на части ‘‘ , или заменить какой-нибудь символ на escape-последовательность . В скриптах, содержащихся во внешних файлах, такие манипуляции не требуются.

Если вложенные скрипты тоже, в свою очередь, содержат document.write , то всё будет выведено последовательно.

Результат на странице будет

Создаём первый скрипт.
Первый скрипт
Создаём второй скрипт.
Второй скрипт
Закончили.

Однако такая последовательность сохраняется до тех пор, пока мы не решим подключить внешние скрипты, выводящие текст на страницу. Создадим, например, файл test1.js с содержимым

document.write('Содержимое test1.js
'); 

И файл test2.js с содержимым

document.write('Содержимое test2.js
'); 

Тогда результат работы скриптов на следующей странице будет различаться в различных браузерах.

В Firefox и Safari выведется ожидаемое

Подключаем test1.js
Содержимое test1.js
Подключаем test2.js
Содержимое test2.js
Закончили подключать

А вот Opera, Chrome и Internet Explorer поведут себя в какой-то мере логично, но не последовательно.

Подключаем test1.js
Подключаем test2.js
Закончили подключать
Содержимое test1.js
Содержимое test2.js

Другими словами, если Firefox и Safari обрабатывают появляющиеся скрипты последовательно, независимо от того, внешние они или внедрёные, то Opera, Chrome и IE выполняют внешние созданные динамически скрипты только после того, как выполнится текущий блок .

Поэтому, если вы кроссбраузерно хотите динамически подключить внешний скрипт и выполнить какие-нибудь действия после того, как он отработает, то эти действия необходимо также выносить во внешний файл.

Разный результат в разных браузерах:

Одинаковый результат во всех браузерах:

document.write('Закончили подключать
'); 

Примеры ошибочного использования

Как было сказано выше, document.write выводит текст только во время загрузки страницы. В этом и заключается основная ошибка многих начинающих JavaScript-программистов — они пытаются использовать document.write в ответ на пользовательские события, например, onclick , в результате чего получают пустую страницу.

Запомните, если вы хотите изменить содержимое блока, то нужно найти этот блок в DOM-дереве, например, по его идентификатору, и изменить у него свойство innerHTML .

document.getElementById('content').innerHTML = 'Новое содержимое'; 

Область применения

Области применения у document.write две: создать новый документ с нуля и сгенерировать динамический контент в том самом месте, где находится родительский элемент script . Всё остальное вариации этих двух случаев.

Генерация нового документа

Если нужно открыть новое окно или создать новый фрейм, содержимое которых не загружается с какого-то урла, а должно генерироваться динамически, то самый простой способ — это написать содержимое нового документа с помощью document.write .

var w = window.open(); w.document.open(); // Открываем документ для записи w.document.writeln(''); w.document.write(' Это динамическое окно.'); w.document.close(); // Заканчиваем формирование документа 

Обратите внимание на вызов метода close , пока он не вызван, браузер считает, что документ ещё не до конца загружен, и не убирает индикатор загрузки.

Вывод динамического содержимого на этапе загрузки

Под таким сложным заголовком скрывается простая вещь. Предположим мы хотим выводить на странице текущий день недели. Тогда в то место, где он должен находиться, нужно вставить следующий код.

Сегодня . 

Несмотря на предрассудки по отношению к document.write , это самый простой способ, в отличие от DOM-методов, и в подобных случаях он более чем уместен.

Информеры для внешних сайтов

Ещё одна область применения для document.write — предоставление кодов сторонним сайтам для вывода различных виджетов, информеров, банеров, контекстных объявлений и прочих подобных вещей. Смысл здесь в том, чтобы предоставить неискушённому пользователю код, который он сможет без лишних движений поставить в то место, где должен появляться соответствующий блок. Тогда пользователю выдаётся простой код в виде тега script и, возможно, инициализации каких-то параметров.

А в этот скрипт уже выдаётся код, который создаёт нужный html-код.

Источник

Document.write()

Пишет строку в поток документа, открытый с помощью document.open() (en-US) .

Примечание: Замечание: поскольку document.write пишет строку в поток документа, вызов document.write для закрытого (но загруженного) документа автоматически вызовет document.open , который очистит документ (en-US) .

Синтаксис

Параметры

Строка, содержащая текст для записи в документ.

Пример

html> head> title>write exampletitle> script> function newContent()  alert("загрузка нового контента"); document.open(); document.write("
Долой старое, да здравствует новое!
"); document.close(); > script> head> body onload="newContent();"> p>Какой-то оригинальный контент.p> body> html> 

Замечания

Запись в документ, загруженный без вызова document.open(), автоматически вызовет document.open . По окончании записи рекомендуется вызвать document.close(), чтобы браузер завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент h1 становится узлом документа.

Если вызов document.write() производится во встроенном HTML теге , вызов document.open() не будет выполнен . Например:

script> document.write("
Основной заголовок
") script> 

Примечание: document.write и document.writeln не работают в XHTML документах (выводится сообщение "Операция не поддерживается" [ NS_ERROR_DOM_NOT_SUPPORTED_ERR ] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с типом MIME - application/xhtml+xml . Больше информации доступно по адресу W3C XHTML FAQ.

Примечание: document.write в отложенных или асинхронных сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов document.write() из асинхронно загруженного внешнего сценария" в консоли ошибок.

Примечание: В Edge вызов document.write в iframe более одного раза приводит к ошибке SCRIPT70: Доступ запрещён.

Примечание: Начиная с версии 55, Chrome не исполняет элементы вставленные посредством document.write() в случае отсутствия кеша HTTP для пользователей 2G подключения.

Спецификации

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник