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

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

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

Найпростіший спосіб використання innerText - присвоїти їй рядок з текстом. Наприклад:

const element = document.getElementById('myElement');
element.innerText = 'Новий текстовий вміст';

Цей код замінить весь існуючий текстовий вміст елементу з ідентифікатором 'myElement' на новий текст.

Властивість innerText також дозволяє отримувати текстовий вміст елементу. Наприклад:

const element = document.getElementById('myElement');
const text = element.innerText;
console.log(text); // Виведе текстовий вміст елементу

При встановленні innerText всі існуючі HTML-теги в елементі будуть проігноровані або замінені на відповідний текст. Наприклад:

<div id="myElement"><p>Початковий <strong>текст</strong></p></div>

const element = document.getElementById('myElement');
element.innerText = 'Новий текст';

Після виконання цього коду, елемент <div> матиме лише текстовий вміст "Новий текст", а всі попередні HTML-теги будуть видалені.

Одна з переваг innerText полягає в тому, що вона автоматично кодує спеціальні символи, такі як < або >, перетворюючи їх на відповідні HTML-сутності. Це допомагає запобігти ризикам безпеки, таким як XSS-атаки, при вставці тексту з невідомих джерел.

Властивість innerText також враховує CSS-стилі елементу, такі як white-space та text-transform. Це означає, що текст, який отримується або встановлюється за допомогою innerText, буде відображатися відповідно до застосованих стилів.

Загалом, innerText є корисною властивістю для роботи з текстовим вмістом на веб-сторінці. Вона дозволяє легко отримувати та встановлювати текст, ігноруючи HTML-теги та забезпечуючи певний рівень безпеки при вставці тексту з невідомих джерел.

Порада:	Якщо потрібно отримати або встановити текстовий вміст елементу, ігноруючи всі HTML-теги, використовуйте `innerText`. Наприклад: `const text = element.innerText;` або `element.innerText = 'Новий текст';`.
Порада:	Пам'ятайте, що `innerText` враховує CSS-стилі елементу, такі як `white-space` та `text-transform`. Це означає, що текст, який отримується або встановлюється за допомогою `innerText`, буде відображатися відповідно до застосованих стилів.
Порада:	Для досвідчених розробників: якщо потрібно встановити або отримати HTML-вміст елементу, використовуй властивість `innerHTML` замість `innerText`. Однак, будь обережним при використанні `innerHTML` з даними, введеними користувачем, оскільки це може призвести до ризиків безпеки, таких як XSS-атаки.

Синтаксис

Element.innerText

Значення

Return

Переглядачі

Переглядач
	1	45	1	9.6	12

Переглядач
	1	18	45	1

Переглядач
	-	-

Приклади

У цьому прикладі ми використовуємо властивість innerText для відображення введеного користувачем тексту в режимі реального часу. Користувач може вводити текст у текстове поле, і цей текст буде відображатися в елементі <div> як звичайний текст без HTML-розмітки.

Для демонстрації відмінностей між innerText та innerHTML, ми додали чекбокс "Показати HTML-теги". Якщо чекбокс ввімкнено, ми використовуємо властивість innerHTML для відображення тексту з HTML-розміткою, в іншому випадку використовується innerText.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/zYXNbPz">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість innerText для отримання та встановлення текстового вмісту HTML-елемента. На відміну від властивості innerHTML, innerText ігнорує всі HTML-теги та повертає лише текстовий вміст.

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

// Отримуємо текстовий вміст елемента
const text = myElement.innerText;
console.log(text); // Виведе текст елемента без HTML-тегів

// Встановлюємо новий текстовий вміст
myElement.innerText = 'Новий текст';

У цьому прикладі ми використовуємо властивість innerText для створення простого текстового редактора. Користувач може вводити текст у текстове поле, і цей текст буде відображатися в елементі <div> у режимі реального часу.

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

// Функція для оновлення вмісту елемента
function updateOutput() {
  outputDiv.innerText = textInput.value;
}

// Додаємо обробник події для введення тексту
textInput.addEventListener('input', updateOutput);

JS довідник

JavaScript

Наповнення JS розділу