Add text to document javascript

How to insert text in an HTML document using JavaScript?

I want to replace a span element with the id «randMsg» with the string «saying» . Here is what I have right now:

 document.getElementById('randMsg').write(saying); 

I am assuming you want to set the text of the span. Try this document.getElementById(‘randMsg’).innerHTML(«saying»);

Duplicate? innerHTML without the html, just text (I think that question is concerned with getting the value, rather than setting it, however.)

3 Answers 3

You can use the textContent property to update the text inside the element:

document.getElementById("randMsg").textContent = "Replaced Content"; 

Or if you need it to work in IE8 and below, you can detect support for textContent , and if it is not supported, you can use the non-standard innerText instead:

var el = document.getElementById("randMsg"), msg = "Replaced Content"; ("textContent" in el) ? el.textContent = msg : el.innerText = msg; 

@PSL There are modern browsers, current browsers aaaaannnnd there’s IE bringing up the rear as always.

Fair enough, but then you can use «in» to detect support, and then use innerText if not supported: jsfiddle.net/RaGng/3

The following W3C DOM code works in all mainstream browsers, including IE8 and older.

var node = document.getElementById('randMsg'); var textToUse = 'Hello, World!'; // Remove all the children of the node. while (node.hasChildNodes()) < node.removeChild(node.firstChild); >// Now add the text. node.appendChild(document.createTextNode(textToUse)); 

You can also use innerText , however, not supported in Firefox:

Or, you can use textContent , however, not supported by IE versions 8 and older:

node.textContent = textToUse; 

Quirksmode has very well maintained browser compatibility tables for all of the above.

Источник

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.

Источник

Метод document.write

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.

Метод document.write – один из наиболее древних методов добавления текста к документу.

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

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

Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

HTML-документ ниже будет содержать 1 2 3 .

Нет никаких ограничений на содержимое document.write .

Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.

   Текст внутри TD. 

Также существует метод document.writeln(str) – не менее древний, который добавляет после str символ перевода строки «\n» .

Только до конца загрузки

Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.

Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.

Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.

Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.

Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:

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

В некоторых современных браузерах при получении страницы с заголовком Content-Type: text/xml или Content-Type: text/xhtml+xml включается «XML-режим» чтения документа. Метод document.write при этом не работает.

Это лишь одна из причин, по которой XML-режим обычно не используют.

Преимущества перед innerHTML

Метод document.write – динозавр, он существовал десятки миллионов лет назад. С тех пор, как появился и стал стандартным метод innerHTML , нужда в нём возникает редко, но некоторые преимущества всё же есть.

• Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом. Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.
• Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).

Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.

Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.

Антипример: реклама

Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:

Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.

Здесь вместо : обратный слеш \ обычно используется для вставки спецсимволов типа \n , а если такого спецсимвола нет, в данном случае \/ не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку .

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

Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.

То есть, дело даже не в самом document.write , а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит – он не будет дальше строить DOM и показывать документ.

Представим на минуту, что сервер ads.com , с которого грузится скрипт, работает медленно или вообще завис – зависнет и наша страница.

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

Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.

Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.

Итого

Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.

• Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
• Метод document.write очень быстр. В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
• Иногда document.write используют для добавления скриптов с динамическим URL. Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже. Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer . Современные системы рекламы и статистики так и делают.

Источник