CreateTextNode: примеры (JAVASCRIPT)
createTextNode(data: string): TextОписание функции createTextNode
document.createTextNode() является методом объекта document в JavaScript. Он используется для создания нового текстового узла (Text Node) в DOM дереве.
Метод применяется, когда требуется динамически добавить текстовое содержимое в документ, избегая интерпретации HTML тегов. Созданный текстовый узел можно вставить в любой элемент DOM с помощью методов, таких как appendChild(), insertBefore() или replaceChild().
Аргументы
Функция принимает один обязательный аргумент:
- data (строка) - Текстовая строка, которая будет содержаться в узле. Любые HTML символы, такие как
<или>, будут экранированы и отображены как обычный текст.
Возвращаемое значение
Метод возвращает новый объект типа Text. Этот объект является DOM узлом (nodeType равен 3), который можно манипулировать стандартными DOM методами.
Базовые примеры использования
Пример создания и добавления простого текстового узла:
const textNode = document.createTextNode('Это обычный текст.');
const div = document.getElementById('myDiv');
div.appendChild(textNode);<div id="myDiv">Это обычный текст.</div>
Пример с экранированием HTML:
const safeText = document.createTextNode('<script>alert("xss")</script>');
document.body.appendChild(safeText);<body><script>alert("xss")</script></body>
Похожие функции в JavaScript
1. Свойство textContent
Позволяет установить или получить текстовое содержимое элемента и всех его потомков. Изменение значения полностью заменяет все дочерние узлы элемента текстовым узлом.
div.textContent = 'Новый текст';2. Свойство innerText
Учитывает стили отображения и возвращает только "видимый" текст. Медленнее, чем textContent, из-за необходимости анализа стилей.
div.innerText = 'Другой текст';3. Вставка через innerHTML
Позволяет вставить строку, которая будет разобрана как HTML. Использовать с осторожностью из-за рисков XSS, если в строке содержится пользовательский ввод.
div.innerHTML = '<span>Текст внутри спана</span>';Когда что использовать:
- createTextNode предпочтителен для безопасного добавления текста, особенно при работе с данными из ненадежных источников.
- textContent удобен для простой установки текста, заменяющего все содержимое элемента.
- innerHTML нужен только для вставки HTML разметки.
Типичные ошибки
1. Попытка добавить узел, забыв вызвать метод вставки.
const textNode = document.createTextNode('Привет');
// Узел создан, но не добавлен в DOM, поэтому не отображается.(Ничего не выводится на странице)
2. Неверное понимание экранирования.
// Разработчик может ожидать, что тег <b> сделает текст жирным.
const text = document.createTextNode('<b>Жирный текст?</b>');
document.body.appendChild(text);<body><b>Жирный текст?</b></body>
Текст отображается как строка, а не как HTML элемент.
Изменения в последних версиях
Метод document.createTextNode() является частью спецификации DOM Level 1 Core (1998 год) и остается стабильным, без существенных изменений в поведении или синтаксисе во всех современных версиях JavaScript и стандартах DOM. Он поддерживается всеми браузерами, включая очень старые версии.
Единственное эволюционное развитие связано с появлением альтернативных API, таких как textContent (DOM Level 3) и более безопасных практик манипуляции DOM, но сама функция неизменна.
Расширенные примеры
Создание текстового узла с последующей вставкой перед определенным элементом:
const newText = document.createTextNode('Вставленный текст');
const targetElement = document.querySelector('#target');
targetElement.parentNode.insertBefore(newText, targetElement);(Текст появится непосредственно перед элементом с id="target")
Динамическое построение абзаца из нескольких текстовых узлов:
const p = document.createElement('p');
const words = ['Это ', 'предложение ', 'из ', 'нескольких ', 'узлов.'];
words.forEach(word => {
p.appendChild(document.createTextNode(word));
});
document.body.appendChild(p);<p>Это предложение из нескольких узлов.</p>
Использование текстового узла для хранения данных, не предназначенных для отображения (комментарии, временные метки):
const hiddenDataNode = document.createTextNode('timestamp:1645558400000');
hiddenDataNode.nodeName = '#comment'; // Симуляция комментария не работает, узел останется текстовым.
// Вместо этого обычно используют data-атрибуты или узлы комментариев (createComment).
console.log(hiddenDataNode.nodeType); // 3
console.log(hiddenDataNode.data); // timestamp:16455584000003 timestamp:1645558400000
Объединение текстовых узлов (normalize):
const container = document.createElement('div');
container.appendChild(document.createTextNode('Часть 1'));
container.appendChild(document.createTextNode('Часть 2'));
console.log(container.childNodes.length); // 2
container.normalize(); // Объединяет смежные текстовые узлы
console.log(container.childNodes.length); // 1
console.log(container.firstChild.data); // 'Часть 1Часть 2'2 1 Часть 1Часть 2
Аналоги в других языках программирования
PHP (DOMDocument):
$doc = new DOMDocument();
$textNode = $doc->createTextNode('Текст в PHP');
$doc->appendChild($textNode);
echo $doc->saveHTML();Текст в PHP
Python (xml.dom.minidom):
from xml.dom.minidom import Document
doc = Document()
text_node = doc.createTextNode("Текст в Python")
doc.appendChild(text_node)
print(doc.toxml())<?xml version="1.0" ?>Текст в Python
C# (System.Xml):
XmlDocument doc = new XmlDocument();
XmlText textNode = doc.CreateTextNode("C# text node");
doc.AppendChild(textNode);
Console.WriteLine(doc.OuterXml);C# text node
Отличия: В JavaScript функция работает в контексте браузера и связана с объектом document. В серверных языках работа ведется с абстрактным XML/HTML документом.