JavaScript метод document.createTextNode()

Определение и применение

JavaScript метод document.createTextNode() позволяет создать и вернуть текстовый узел с указанным текстом.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Document.createTextNode

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
createTextNode	✓1	✓12	✓1	✓7	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const textNode = document.createTextNode(text);

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

DOM Standard.

Значения параметров

Пример использования

Создание кнопки и добавление её в документ

Нажмите ▶, затем Нажми меня несколько раз: каждый клик создаёт новую кнопку, текст Mybutton для которой создаётся методом createTextNode().

index.html

HTML

<button data-migration-click-0="">Нажми меня</button>
<hr />

main.js

JavaScript

function myFunc() {
    let newElem = document.createElement('button')
    const text = document.createTextNode('Mybutton')
    newElem.appendChild(text)
    document.body.appendChild(newElem)
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая:

• с использованием JavaScript методаcreateElement() объекта document создаем новый элемент <button>.
• с использованием JavaScript метода .createTextNode() объекта document создаем текстовое содержимое.
• с использованием JavaScript метода .appendChild() объекта Node добавляем текстовое содержимое элементу <button>, а затем добавляем наш созданный элемент в элемент <body>.