JS властивість Element.outerHTML
Загальний опис
outerHTML - це властивість об'єкта Element, яка представляє розмітку HTML елемента, включно з самим елементом та його вмістом. Ця властивість дозволяє отримати або встановити HTML-код елемента, що може бути корисним для динамічної маніпуляції вмістом сторінки.
Для отримання HTML-коду елемента достатньо звернутися до властивості outerHTML відповідного об'єкта Element. Наприклад, для елемента з id="myElement" можна використати const html = document.getElementById("myElement").outerHTML;. Це поверне рядок, що містить HTML-код елемента та його вміст.
Властивість outerHTML часто використовується для динамічного оновлення вмісту веб-сторінки без необхідності повного перезавантаження. Наприклад, можна змінити вміст елемента на основі даних, отриманих з серверу:
fetch("/data.json")
.then(response => response.json())
.then(data => {
const element = document.getElementById("myElement");
element.outerHTML = `<div id="myElement">${data.content}</div>`;
});
У цьому прикладі ми отримуємо дані з серверу за допомогою fetch, а потім замінюємо весь HTML-код елемента myElement новим вмістом, використовуючи властивість outerHTML.
Крім того, outerHTML можна використовувати для клонування елементів на сторінці. Наприклад, можна створити копію елемента та вставити її в інше місце:
const originalElement = document.getElementById("myElement");
const clone = document.createElement("div");
clone.outerHTML = originalElement.outerHTML;
document.body.appendChild(clone);
У цьому прикладі ми створюємо новий порожній елемент div, копіюємо HTML-код оригінального елемента myElement у властивість outerHTML нового елемента, а потім додаємо його до document.body.
Варто зазначити, що встановлення outerHTML замінює весь елемент, включно з його вмістом та обробниками подій. Тому, якщо ви додали обробники подій до елемента, вони будуть втрачені після заміни outerHTML. У такому випадку краще використовувати властивість innerHTML для заміни лише вмісту елемента.
Підсумовуючи, outerHTML є потужною властивістю для динамічної маніпуляції HTML-кодом елементів на веб-сторінці. Її можна використовувати для отримання або встановлення HTML-коду елемента, оновлення вмісту сторінки без перезавантаження, клонування елементів та інших операцій, пов'язаних з розміткою.
| Порада: | Будь обережним при встановленні |
| Порада: | Використовуй |
| Порада: | Пам'ятай, що |
Синтаксис
Element.outerHTMLЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
11 |
1.3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
1 |
18 |
14 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми маємо елемент div з id="container", що містить початкову розмітку. Також є текстове поле textarea та кнопка "Оновити розмітку".
При завантаженні сторінки ми встановлюємо початкову розмітку елемента #container в текстове поле за допомогою властивості outerHTML. Коли користувач натискає кнопку "Оновити розмітку", ми оновлюємо розмітку елемента #container, присвоюючи його властивості outerHTML значення з текстового поля. Таким чином, користувач може редагувати розмітку в текстовому полі та бачити результат змін безпосередньо на сторінці після натискання кнопки "Оновити розмітку".
Цей приклад демонструє використання властивості outerHTML для отримання та встановлення розмітки елемента, включно з самим елементом. Користувач може взаємодіяти з прикладом, редагуючи розмітку в текстовому полі та оновлюючи її на сторінці.
У цьому прикладі демонструється використання властивості outerHTML для отримання HTML-коду елемента div з id="myDiv" разом з його вмістом. При натисканні на кнопку "Показати outerHTML" викликається функція showOuterHTML(), яка отримує елемент div за допомогою document.getElementById('myDiv'), зчитує значення властивості outerHTML цього елемента та виводить його у елемент <p> на сторінці. Виведений рядок буде містити повний HTML-код елемента div та його вміст.
<div id="myDiv">
<p>Це параграф всередині div.</p>
</div>
<button onclick="showOuterHTML()">Показати outerHTML</button>
<p id="output"></p>
<script>
function showOuterHTML() {
const myDiv = document.getElementById('myDiv');
const outerHTML = myDiv.outerHTML;
const output = document.getElementById('output');
output.textContent = outerHTML;
}
<script>У цьому прикладі демонструється використання властивості outerHTML для зміни HTML-коду елемента списку. На сторінці є невпорядкований список (<ul>) з трьома елементами (<li>). При натисканні на кнопку "Змінити список" викликається функція modifyList(), яка виконує два кроки:
Створюється новий елемент списку (
<li>) за допомогоюdocument.createElement('li'), його текстовий вміст встановлюється на "Новий елемент", і він додається до кінця списку за допомогоюlist.appendChild(newItem).Отримується другий елемент списку за допомогою
list.children[1], і йогоouterHTMLзмінюється на нове значення'<li>Змінений елемент</li>'. Це ефективно замінює весь HTML-код другого елемента списку на нове значення.
Після виконання функції modifyList() список буде змінено: до нього буде додано новий елемент у кінці, а другий елемент буде замінено на "Змінений елемент".
<ul id="list">
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
</ul>
<button onclick="modifyList()">Змінити список</button>
<script>
function modifyList() {
const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = 'Новий елемент';
// Додаємо новий елемент до списку
list.appendChild(newItem);
// Змінюємо outerHTML другого елемента списку
const secondItem = list.children[1];
secondItem.outerHTML = '<li>Змінений елемент</li>';
}
<script>