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

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

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

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

const element = document.getElementById('myElement');
element.innerHTML = '<p>Новий вміст елементу</p>';

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

Властивість innerHTML також дозволяє вставляти HTML-код, що динамічно генерується на основі даних з JavaScript. Наприклад:

const items = ['Яблуко', 'Банан', 'Апельсин'];
const list = document.getElementById('myList');
let htmlContent = '<ul>';

for (const item of items) {
  htmlContent += `<li>${item}</li>`;
}

htmlContent += '</ul>';
list.innerHTML = htmlContent;

Тут ми створюємо невпорядкований HTML-список з елементів масиву items і вставляємо його в елемент 'myList'.

Важливо пам'ятати, що при присвоєнні innerHTML весь існуючий вміст елементу буде замінено новим значенням. Якщо потрібно лише додати новий вміст, а не замінювати існуючий, можна використовувати властивість innerHTML в поєднанні з оператором +=:

const element = document.getElementById('myElement');
element.innerHTML += '<p>Додатковий вміст</p>';

Цей код додасть новий абзац тексту в кінець існуючого HTML-вмісту елементу.

При використанні innerHTML слід бути обережним з введенням користувачем, оскільки вставлений HTML-код буде інтерпретовано браузером. Це може призвести до ризиків безпеки, таких як Cross-Site Scripting (XSS) атаки. Для безпечного введення користувачем рекомендується використовувати функцію textContent замість innerHTML або належним чином обробляти вхідні дані перед вставкою в DOM.

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

правити

Порада

Треба бути обережним при використанні innerHTML з даними, введеними користувачем, оскільки це може призвести до ризиків безпеки, таких як Cross-Site Scripting (XSS) атаки. Для безпечного введення користувачем рекомендується використовувати функцію textContent замість innerHTML або належним чином обробляти вхідні дані перед вставкою в DOM.

автор: Bond правити

Порада

Якщо потрібно лише додати новий вміст, а не замінювати існуючий, використовуй оператор += з innerHTML. Наприклад: element.innerHTML += '<p>Додатковий вміст</p>'. Це дозволить зберегти існуючий вміст та додати новий.

автор: Bond правити

Порада

Для досвідчених розробників: при роботі з великими об'ємами даних або частими оновленнями вмісту, використання innerHTML може призвести до зниження продуктивності. У таких випадках розгляньте можливість використання більш ефективних методів маніпуляції DOM, таких як createElement(), createDocumentFragment() або бібліотек для роботи з DOM, наприклад, React або Vue.js.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.innerHTML

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	8	12	4

Підтримка: мобільні переглядачі

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

Приклади

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

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент за його ідентифікатором
const myElement = document.getElementById('myElement');

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

<div id="container">Демонстраційний елемент</div>

// Масив об'єктів з даними
const data = [
  { name: 'Іван', age: 25 },
  { name: 'Марія', age: 30 },
  { name: 'Петро', age: 35 }
];

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

// Генеруємо HTML-розмітку
let html = '';
for (const person of data) {
  html += `<div>
    <h3>${person.name}</h3>
    <p>Вік: ${person.age}</p>
  </div>`;
}

// Вставляємо розмітку в контейнер
container.innerHTML = html;