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

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.
Порада:

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

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

Синтаксис

Element.innerHTML

Значення

Return

Переглядачі

Переглядач

1

1

1

8

12
Переглядач

1

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі ми використовуємо властивість innerHTML для динамічного оновлення списку покупок на веб-сторінці. Користувач може вводити нові елементи в текстове поле, і після натискання кнопки "Додати" або клавіші Enter, новий елемент буде додано до списку. Властивість innerHTML використовується для вставки нового HTML-вмісту в елемент <ul>, що представляє список покупок.

Важливо зазначити, що при використанні innerHTML з даними, введеними користувачем, необхідно належним чином очищати ці дані, щоб запобігти потенційним атакам ін'єкцій. У цьому прикладі ми використовуємо метод trim() для видалення зайвих пробілів, але для біль

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

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

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

У цьому прикладі ми використовуємо властивість innerHTML для створення складного HTML-вмісту з динамічними даними. Це дозволяє ефективно генерувати розмітку на стороні клієнта.

// Масив об'єктів з даними
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;

Спільнота

Зв'язок