Що таке innerHTML і чому інколи його краще не використовувати?innerHTML — це властивість JavaScript, яка дозволяє працювати з вмістом HTML-елементів. Простіше кажучи, за допомогою innerHTML можна отримати або змінити все, що знаходиться всередині HTML-тега: текст, інші теги, атрибути тощо.Приклад:// Беремо елемент <div> зі сторінкиconst div = document.getElementById("example");// Встановлюємо його вмістdiv.innerHTML = "<p>Привіт, я новий текст!</p>"; Після виконання в <div id="example"> з’явиться:<p>Привіт, я новий текст!</p>.Весь попередній вміст <div> (якщо він був) буде замінено.Переваги innerHTML— Простота та швидкість. Одним рядком можна додати до елемента складний HTML-код.— Динамічність. HTML-контент можна створювати програмно, наприклад, на основі даних з API.Приклад:const list = ["яблуко", "банан", "апельсин"];document.getElementById("list").innerHTML = list.map(item => <li>${item}</li>).join(""); Результат:<ul> <li>яблуко</li> <li>банан</li> <li>апельсин</li></ul> Чому innerHTML не завжди варто використовувати?1. Уразливість до XSS-атак.При роботі з innerHTML ви вставляєте HTML-код у сторінку. Якщо код генерується на основі сторонніх даних (наприклад, від користувача або сервера), це може призвести до впровадження шкідливого коду.2. Перезапис старого вмісту.innerHTML повністю замінює вміст елемента. Якщо елемент мав обробники подій (додані через addEventListener), вони будуть видалені.3. Низька продуктивність із великими обсягами даних.При кожному використанні innerHTML вся внутрішня структура елемента пересоздається, навіть якщо зміни мінімальні.Чим замінити innerHTML?1. textContentЯкщо потрібно змінити лише текст (без HTML), використовуйте textContent. Це безпечніше, адже текст не інтерпретується як HTML.2. insertAdjacentHTMLЦей метод дозволяє додавати HTML-код у конкретне місце елемента без перезапису всього вмісту.3. DOM-методиДля складної логіки краще створювати елементи через методи на кшталт document.createElement та appendChild.ПорадаЯкщо ви все ж вирішили використати innerHTML, переконайтеся, що дані, які ви вставляєте, безпечні та ретельно перевірені.#простимисловами #html #javascript