JS метод Document.createTextNode()

Загальний опис

Метод createTextNode() дозволяє створювати новий текстовий вузол, що не містить HTML-розмітки, який потім може бути вставлений у будь-яку частину ДОМ-дерева. Основна корисність createTextNode() полягає у можливості додавання чистого тексту до веб-сторінки без ризику внесення небажаного HTML або виконання скриптів, що робить його незамінним інструментом для забезпечення безпеки веб-додатків.

Основний синтаксис методу createTextNode() виглядає наступним чином: document.createTextNode(data), де data — це рядок, який буде перетворено на текстовий вузол.

Розгляньмо найпростіший випадок використання createTextNode() для додавання тексту до елементу:

var textNode = document.createTextNode('Це простий текст.');
var p = document.createElement('p');
p.appendChild(textNode);
document.body.appendChild(p);

У цьому прикладі спершу створюється текстовий вузол з текстом 'Це простий текст.', потім створюється новий параграф, до якого додається текстовий вузол, і нарешті цей параграф додається до тіла документа. Таким чином, на сторінці з'являється параграф з вказаним текстом.

Для розширення можливостей метод createTextNode() можна використовувати разом з іншими методами маніпуляції ДОМ для динамічної зміни вмісту сторінки. Наприклад, можна замінити текст в існуючому елементі на новий:

var existingElement = document.getElementById('someElement');
var newText = document.createTextNode('Новий текст для існуючого елемента.');
existingElement.textContent = ''; // Очищення існуючого тексту
existingElement.appendChild(newText);

У цьому випадку метод createTextNode() використовується для створення нового текстового вузла, який потім додається до вже існуючого елемента, попередньо очищеного від тексту. Це дозволяє динамічно змінювати вміст елементів на сторінці без необхідності повної переробки елемента або використання небезпечних методів, таких як innerHTML.

Застосування у складних веб-додатках

В контексті складних веб-додатків метод createTextNode() може бути використаний для безпечного додавання користувацького введення на сторінку. Це особливо важливо, коли необхідно уникнути cross-site scripting (XSS) атак шляхом запобігання вставці HTML або JavaScript коду через текстові поля введення.

var userInput = 'Користувацьке введення без HTML та JavaScript';
var safeText = document.createTextNode(userInput);
document.body.appendChild(safeText);

Такий підхід гарантує, що весь текст, введений користувачем, буде оброблено як чистий текст, без інтерпретації його як HTML або JavaScript код, що значно підвищує безпеку веб-додатків.

Синтаксис

createTextNode(data)

Параметри

*data

Рядок, який містить дані, які будуть поміщені в текстовий вузол.

Return

object

Повертає об'єкт типу Text, який представляє собою новостворений текстовий вузол. Цей вузол може бути вставлений в будь-яке місце документа як частина DOM-дерева. Вузол не містить жодних HTML-тегів або елементів стилізації; він лише зберігає чистий текст, переданий як аргумент методу.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створення нового текстового вузла
var textNode = document.createTextNode('Це простий текстовий вузол');

// Знаходження елемента div за його ідентифікатором
var divElement = document.getElementById('simpleDiv');

// Додавання текстового вузла до елемента div
divElement.appendChild(textNode);

// Функція для додавання нового пункту до списку
function addListItem(text) {
    // Створення нового текстового вузла з переданим текстом
    var textNode = document.createTextNode(text);
    
    // Створення нового елемента li
    var liElement = document.createElement('li');
    
    // Додавання текстового вузла до li
    liElement.appendChild(textNode);
    
    // Знаходження елемента ul за його ідентифікатором
    var ulElement = document.getElementById('dynamicList');
    
    // Додавання елемента li до ul
    ulElement.appendChild(liElement);
}

// Виклик функції для додавання нового пункту до списку
addListItem('Динамічно доданий пункт списку');