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-кодом, оновлювати вміст елементів та створювати інтерактивні веб-додатки.
| Порада: | Треба бути обережним при використанні |
| Порада: | Якщо потрібно лише додати новий вміст, а не замінювати існуючий, використовуй оператор |
| Порада: | Для досвідчених розробників: при роботі з великими об'ємами даних або частими оновленнями вмісту, використання |
Синтаксис
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;