JS властивість Element.textContent

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

Властивість textContent є вбудованою властивістю об'єкта Element в JavaScript, яка дозволяє отримувати та встановлювати текстовий вміст вузла DOM. На відміну від властивості innerText, textContent повертає весь текст, включно з текстом, прихованим через CSS, і не інтерпретує HTML-розмітку. Ця властивість є корисною для маніпуляцій з текстовим вмістом елементів, створення динамічного контенту, а також для отримання або зміни тексту без необхідності обробки HTML-розмітки.

Властивість textContent може бути використана з будь-яким вузлом DOM, включно з елементами, текстовими вузлами та коментарями. Розглянемо наступний HTML-код:

<div id="myDiv">
  <p>Це <span>приклад</span> тексту.</p>
  <!-- Коментар -->
</div>

Ми можемо отримати та встановити значення textContent наступним чином:

const myDiv = document.getElementById('myDiv');
console.log(myDiv.textContent); // Виведе "Це приклад тексту. <!-- Коментар -->"

const paragraph = myDiv.firstElementChild;
console.log(paragraph.textContent); // Виведе "Це приклад тексту."

paragraph.textContent = 'Новий текст';

Як бачимо, textContent повертає весь текст вузла, включно з текстом, прихованим через CSS, та текстом коментарів. При встановленні textContent будь-яка існуюча HTML-розмітка всередині елемента буде замінена на новий текст.

Властивість textContent часто використовується для динамічного створення контенту на основі даних з JavaScript. Наприклад, ми можемо створити список елементів з масиву:

const fruits = ['Яблуко', 'Банан', 'Апельсин'];
const list = document.createElement('ul');

for (const fruit of fruits) {
  const listItem = document.createElement('li');
  listItem.textContent = fruit;
  list.appendChild(listItem);
}

document.body.appendChild(list);

Цей код створить невпорядкований список (<ul>) з трьома елементами списку (<li>), кожен з яких міститиме текст з відповідного елемента масиву fruits.

Властивість textContent також часто використовується для отримання або зміни тексту елементів без необхідності обробки HTML-розмітки. Наприклад, ми можемо отримати текст з елемента <input> або змінити текст заголовка:

const input = document.querySelector('input');
console.log(input.textContent); // Виведе поточне значення input

const heading = document.querySelector('h1');
heading.textContent = 'Новий заголовок';

Властивість textContent є зручним інструментом для роботи з текстовим вмістом елементів DOM. Вона дозволяє легко отримувати та встановлювати текст, не турбуючись про HTML-розмітку, і є особливо корисною для динамічного створення контенту на основі даних з JavaScript.

Синтаксис

Element.textContent

Значення

Return

Переглядачі

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

Приклади

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

// Отримуємо посилання на елемент з id="text"
const textElement = document.getElementById('text');

// Змінюємо текстовий вміст елемента
textElement.textContent = 'Новий текст';

// Отримуємо посилання на елемент списку
const list = document.getElementById('myList');

// Створюємо новий елемент списку
const newItem = document.createElement('li');

// Додаємо текстовий вміст до нового елемента
newItem.textContent = 'Новий елемент списку';

// Додаємо новий елемент до списку
list.appendChild(newItem);