Яка різниця між властивостями HTML-елементів innerHTML і innerText?

Повне пояснення

Що це і навіщо

• innerHTML – властивість, що повертає або встановлює повний HTML‑вміст елемента. Використовується, коли потрібно динамічно вставити або отримати структуру DOM‑елементів.
• innerText – повертає лише видимий текст елемента, з урахуванням стилів (наприклад, display:none або visibility:hidden). Підходить для отримання чистого тексту без тегів.

Ключові принципи

• innerHTML розбирає рядок як HTML, створюючи нові вузли DOM.
• innerText не парсить HTML, а просто повертає текстовий вузол.
• Обидва властивості синхронні: при записі DOM оновлюється одразу.

Як це працює

1. Читання: браузер читає внутрішній вміст елемента.
   • innerHTML повертає рядок, що містить теги і атрибути.
   • innerText повертає текст, що відображається користувачу.
2. Запис: браузер замінює існуючий вміст.
   • innerHTML парсить новий рядок і створює/видаляє вузли.
   • innerText вставляє текст як простий текстовий вузол, не створюючи тегів.

Практика і реалізація (JS/TS)

const div = document.createElement('div');
div.innerHTML = '<p>Hello <strong>world</strong></p>';
console.log(div.innerText); // "Hello world"

const span = document.querySelector('#mySpan')!;
span.innerText = 'Привіт'; // вставляє лише текст

Тестування

• Jest: expect(element.innerHTML).toBe('<b>Bold</b>');
• Playwright: await page.locator('#id').innerText(); для перевірки видимого тексту.

Безпека

• Використання innerHTML з неперевіреним вмістом може викликати XSS. Завжди очищайте дані перед вставкою.

Оптимізація

• Якщо потрібен лише текст, використовуйте textContent замість innerText для кращої продуктивності.
• Для великих блоків HTML краще створювати DOM‑елементи через document.createElement і додавати їх у фрагмент, а потім вставляти один раз.

Часті помилки

1. Вставка скриптів через innerHTML → XSS.
2. Очікування, що innerText поверне HTML – помилкове розуміння.
3. Використання innerText у браузерах без підтримки – варто перевіряти textContent.
4. Неправильне очищення – не видаляє атрибути, що містять небезпечний код.
5. Використання innerHTML для великих блоків → перерисовка DOM.
6. Заміна innerText на innerHTML → втрати форматування.
7. Не враховує стилі видимості – innerText може повернути текст з display:none.
8. Проблеми з локалізацією – innerText не враховує dir атрибут.

Cheatsheet

• innerHTML: HTML‑рядок → DOM вузли.
• innerText: текст без тегів, враховує видимість.
• textContent: чистий текст без стилів, швидше за innerText.