css.in.ua
Підтримати

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.

У цьому прикладі ми використовуємо властивість 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);

Спільнота

Зв'язок