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.

правити

Порада

Пам'ятайте, що властивість textContent повертає весь текст вузла, включно з текстом, прихованим через CSS, та текстом коментарів. Тому, якщо ви хочете отримати лише видимий текст, краще використовувати властивість innerText.

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

Порада

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

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);

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

Порада

Якщо ви потребуєте змінити HTML-розмітку всередині елемента, використовуйте властивість innerHTML замість textContent. Властивість textContent замінить весь вміст елемента на рядок тексту, тоді як innerHTML дозволить вам вставити HTML-розмітку. Наприклад:

const div = document.querySelector('div');
div.textContent = '<p>Новий параграф</p>'; // Встановить текст "<p>Новий параграф</p>"
div.innerHTML = '<p>Новий параграф</p>'; // Створить новий параграф всередині div

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

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

Синтаксис

Element.textContent

Переглядачі

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

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

Переглядач
	1	1	3	9	12	9

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

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

Приклади

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

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

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

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

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

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

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

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

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