Document write method in html

Как записать строку из JavaScript в HTML

Довольно часто приходится сталкиваться с необходимостью записать некий текст, а иногда и html-код из JS в какой-либо элемент html-разметки. Существует несколько способов это сделать. Давайте рассмотрим их подробнее.

Способ 1. Использование метода document.write

Метод document.write существует в JavaScript с незапамятных времен и позволяет вывести не только текст, но и любые теги разметки на вашу html-страницу, например:

Результат внедрения этого скрипта будет таким:

Все бы хорошо, но у этого метода есть одна особенность — он хорошо работает в процессе загрузки html-страницы. Метод document.write вставляет текст в то место html-разметки, где был вызван, ещё до формирования DOM-структуры, которую браузер строит в процессе парсинга страницы. Поэтому строки, записанные тем кодом, который приведен выше, внедряется в html-документ так, как если бы они присутствовали изначально в разметке.

Хуже обстоит дело с попытками использовать метод document.write при клике на кнопку, например. В этом случае текущая страница заменяется на новую с тем текстом, который вы использовали внутри скобок document.write . Попробуйте сами в примере ниже.

Существует также метод document.writeln() , который отличается от document.write() тем, что добавляет символ перевода строки «\n» . В большинстве случаев это никак визуально не видно, т.к. в html-коде для перевода строки нужен тег
, а не перевод строки символом \n . Разницу можно заметить в таком элементе формы, как textarea , где перевод строки как раз выполняется с помощью этого символа.

Для сравнения сделаем несколько строк текста без всяких тегов с помощью обоих методов, а затем применим их для вывода текста внутри textarea .

В примере можно заметить, что при использовании document.writeln() появляется дополнительный пробел между двумя строками в обычном тексте и перевод строки внутри textarea .

Метод document.write

Метод document.writeln

Оба этих метода можно использовать, когда вы учите JavaScript, для того чтобы вывести массив, например, или какую-либо разметку на страницу, а не в консоль. На html-странице, которая уже сформирована, вряд ли стоит применять document.write() или document.writeln() , т.к. они перезапишут ее содержимое.

И мы опять возвращаемся к популярному вопросу «Как записать строку из JS в HTML?». И переходим к свойству innerHTML .

Способ 2. Использование свойства innerHTML

Для любого элемента можно получить и записать свойство innerHTML , которое в соответствии с переводом с английского позволяет управлять внутренним html-кодом выбранного элемента. Это свойство замещает весь html-код, который был внутри выбранного элемента, на тот, который вы присвоили ему в качестве значения.

Например, такой код сотрет все содержимое данной статьи:

Поскольку свойство innerHTML принимает в качестве значения строку, вы вполне можете воспользоваться оператором «+» для конкатенации строк и формировать содержимое элемента таким образом:

Следующий пример позволяет заменить внутреннее содержимое элемента (абзаца) с id=»temp-text» , который содержит внутренние теги, на другой текст с внутренней разметкой.

Нажмите на кнопку «Получить html-разметку абзаца» до и после замены текста — и вы увидите внутренние теги, которые при добавлении внутрь выбранного абзаца отображаются в соответствии с правилами css и html.

Текст с жирным и курсивным форматированием.

Получить html-разметку абзаца Изменить html-разметку абзаца

Есть еще одно отличие свойства innerHTML от метода document.write . Оно заключается в том, что при ошибочном добавлении тегов, в innerHTML браузер скорректирует синтаксис так, чтобы все теги были закрыты.

В предыдущем примере была допущена такая ошибка — не закрыт тег ,- и браузер это исправил, добавив 2 по сути ненужных тега, но при этом сохранив валидность html-кода.

Особенности поведения свойства innerHTML

Нельзя вставлять с помощью innerHTML теги — такой код не выполнится. Хотя есть и обходной способ, когда можно использовать для этой цели события. Подробнее можно прочитать в статье на MDN.

Также свойство innerHTML отсутствует у элементов без содержимого (изображения,
, ), оно может использоваться только для элементов с открывающим и закрывающим тегом.

В приведенном ниже примере мы попытаемся заместить изображение абзацем, но безуспешно.

headphones . innerHTML = ‘

Теперь это абзац

‘ ;

Попробуйте сами. Ничего не происходит, не так ли?

Заменить изображение

Способ 3. Свойство textContent

В том случае, когда вам НЕ нужно записывать строку из JS в html с дополнительной разметкой в виде html-тегов, лучше воспользоваться свойством textContent . Оно позволяет манипулировать только текстом элемента.

В примере ниже вы можете добавить текст с тегами в текстовом поле. Этот текст отобразится в блоке с рамкой, когда вы будете печатать. Если нажать на кнопку «innerHTML» , вы увидите преобразование тегов в текст с форматированием.

Так выглядит этот пример при применении свойства textContent

Тот же текст + теги, но при применении свойства innerHTML

Особенности поведения свойства textContent

• textContent вернет null , если элемент является документом, типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использовать это свойство в таком виде: document.documentElement.textContent .
• Если элемент представляет собой CDATA, комментарий или текстовый элемент, свойство textContent возвращает текст внутри узла в виде строки (т.н. nodeValue ).
• Для элементов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Т.е. происходит склеивание текста всех вложенных элементов. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
• Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.

Пример ниже демонстрирует, каким образом отображается текст блока со вложенными (дочерними) элементами при использовании свойства textContent .

Block Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consequuntur maxime, cumque facilis eos itaque inventore rerum.

Способ 4. Свойство innerText

Свойство innerText подобно innerHTML , но не подразумевает вставку html-тегов, только текст. И с этой точки зрения оно работает так же, как и свойство textContent . Только у них несколько разная поддержка браузерами. По данным caniuse.com innerText поддерживает большинство браузеров, за исключением Firefox до 44 версии, доля использования которого в мире на данный момент составляет 0,17%.

Свойство textContent имеет также очень приличную поддержку браузерами, но не работает в IE версий 6-8, которыми на данный момент пользуется 0,17% от всех компьютеров в мире.

Свойство innerText было введено в свое время Internet Explorer-ом, а затем в 2016 было внедрено в стандарт HTML после адаптации всеми ведущими браузерами. По своим функциям это свойство подобно тексту, полученному пользователем при выделении содержимого элемента курсором и копировании его в буфер обмена. Работает innerText по тому же принципу, что и textContent , но есть некоторые отличия:

• textContent получает содержимое всех элементов, включая и , тогда как innerText этого не делает.
• innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
• Метод innerText позволяет получить CSS, а textContent — нет.

Способ 5. Свойство outerHTML

Свойство outerHTML также, как и innerText , было введено в InternetExplorer и является нестандартным, хотя на данный момент.

Давайте посмотрим, что нам вернет свойство outerHTML на примере.

outerHTML property

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consequuntur maxime, cumque facilis eos itaque inventore rerum.

Источник

document: write() method

Warning: Use of the document.write() method is strongly discouraged.

The document.write() method writes a string of text to a document stream opened by document.open() .

Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open() , which will clear the document.

Syntax

Parameters

A string containing the text to be written to the document.

Return value

Examples

html lang="en"> head> title>Write exampletitle> script> function newContent()  document.open(); document.write("
Out with the old, in with the new!
"); document.close(); > script> head> body onload="newContent();"> p>Some original document content.p> body> html> 

Notes

The text you write is parsed into the document’s structure model. In the example above, the h1 element becomes a node in the document.

Writing to a document that has already loaded without calling document.open() will automatically call document.open() . After writing, call document.close() to tell the browser to finish loading the page.

If the document.write() call is embedded within an inline HTML tag, then it will not call document.open() . For example:

script> document.write("
Main title
"); script> 

Note: document.write() and document.writeln do not work in XHTML documents (you’ll get an «Operation is not supported» [ NS_ERROR_DOM_NOT_SUPPORTED_ERR ] error in the error console). This happens when opening a local file with the .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.

Note: Using document.write() in deferred or asynchronous scripts will be ignored and you’ll get a message like «A call to document.write() from an asynchronously-loaded external script was ignored» in the error console.

Note: In Edge only, calling document.write() more than once in an causes the error «SCRIPT70: Permission denied».

Note: Starting with version 55, Chrome will not execute elements injected via document.write() when specific conditions are met. For more information, refer to Intervening against document.write().

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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.

Источник