textContent в JavaScript — текст елемента

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

Властивість 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

Приклади

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

<header>
  <h2 class="title">Node: textContent property</h2>
  <p class="description">Встановлює або повертає текстовий вміст вузла та його нащадків.</p>
</header>
<main>
  <div class="result">
    <h3>Редагувати текст</h3>
    <textarea id="textInput">Початковий текст</textarea>
    <button onclick="updateText()">Оновити текст</button>
    <div id="textOutput">Текст буде тут</div>
  </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);
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}

button {
  padding: 5px 10px;
}

#textOutput {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 50px;
}

function updateText() {
  const textInput = document.getElementById('textInput');
  const textOutput = document.getElementById('textOutput');

  // Отримуємо текст з textarea
  const newText = textInput.value;

  // Оновлюємо textContent елемента textOutput
  textOutput.textContent = newText;
}
//# sourceURL=pen.js

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