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-коду елемента, оновлення вмісту сторінки без перезавантаження, клонування елементів та інших операцій, пов'язаних з розміткою.

правити

Порада

Будь обережним при встановленні outerHTML, оскільки це замінює весь елемент, включно з його обробниками подій. Якщо ти додав обробники подій до елемента, вони будуть втрачені після заміни outerHTML. У такому випадку краще використовувати властивість innerHTML для заміни лише вмісту елемента.

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

Порада

Пам'ятай, що outerHTML повертає рядок, що містить HTML-код елемента. Якщо ти плануєш маніпулювати цим рядком або вставляти його в інші частини коду, переконайся, що ти належним чином екрануєш спеціальні символи, щоб уникнути проблем з безпекою або неочікуваної поведінки. Використовуй функції, такі як Node.textContent або Element.innerHTML, якщо тобі потрібно лише отримати або встановити текстовий вміст елемента без розмітки HTML.

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

Порада

Використовуй outerHTML для клонування елементів на сторінці. Можна створити копію елемента та вставити її в інше місце, скопіювавши HTML-код оригінального елемента у властивість outerHTML нового елемента.

const originalElement = document.getElementById("myElement");
const clone = document.createElement("div");
clone.outerHTML = originalElement.outerHTML;
document.body.appendChild(clone);

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

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

Синтаксис

Element.outerHTML

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

<div id="myDiv">
    <p>Це параграф всередині div.</p>
</div>
<button onclick="showOuterHTML()">Показати outerHTML</button>
<p id="output"></p>

function showOuterHTML() {
    const myDiv = document.getElementById('myDiv');

    // outerHTML — розмітка елемента разом із ним самим
    document.getElementById('output').textContent = myDiv.outerHTML;
}

<ul id="list">
    <li>Елемент 1</li>
    <li>Елемент 2</li>
    <li>Елемент 3</li>
</ul>
<button onclick="modifyList()">Змінити список</button>

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>';
}