createTextNode() — створення текстового вузла в JS

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

Метод 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() для запобігання проблемам з безпекою, зокрема, XSS-атакам (Cross-Site Scripting). Цей метод автоматично екранує HTML-теги, тому вставлений текст не буде інтерпретований як HTML-код або JavaScript, що забезпечує безпеку вашої веб-сторінки.

автор: Bond правити

Порада

Якщо вам потрібно оновити текстовий вузол, створений за допомогою createTextNode(), спочатку знайдіть цей вузол у DOM-дереві, а потім використовуйте властивість nodeValue для зміни його вмісту. Це дозволяє змінювати текст без необхідності видаляти та створювати новий текстовий вузол, оптимізуючи продуктивність вашого додатку.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

createTextNode(data)

Параметри

data

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

автор: Bond

правити

Повернення

object

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="simpleDiv">Демонстраційний елемент</div>

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

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

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

<ul id="dynamicList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

// Функція для додавання нового пункту до списку
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('Динамічно доданий пункт списку');

<header>
  <h2 class="title">Document.createTextNode()</h2>
  <p class="description">Метод створює новий текстовий вузол у документі.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="textInput" placeholder="Введіть текст" />
    <button id="addButton">Додати текст</button>
    <ul id="textList"></ul>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#textInput {
  margin-right: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}

document.getElementById('addButton').addEventListener('click', function () {
  var input = document.getElementById('textInput');
  var text = input.value.trim();

  if (text) {
    var textNode = document.createTextNode(text);
    var li = document.createElement('li');
    li.appendChild(textNode);
    document.getElementById('textList').appendChild(li);
    input.value = ''; // Очищення поля вводу після додавання
  } else {
    alert('Будь ласка, введіть текст!');
  }
});
//# sourceURL=pen.js