outerHTML в JavaScript — елемент разом із його тегом

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

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	4

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

Переглядач
	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;
}

<header>
  <h2 class="title">Element: outerHTML property</h2>
  <p class="description">Отримує або встановлює розмітку елемента, включно з самим елементом.</p>
</header>
<main>
  <div class="result">
    <div id="container">
      <h3>Заголовок</h3>
      <p>Початковий текст</p>
    </div>
    <textarea id="outerHTMLInput" rows="5"></textarea>
    <button id="updateButton">Оновити розмітку</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

const outerHTMLInput = document.getElementById('outerHTMLInput');
const updateButton = document.getElementById('updateButton');
const containerElement = document.getElementById('container');

// Встановлюємо початкову розмітку в текстове поле
outerHTMLInput.value = containerElement.outerHTML;

updateButton.addEventListener('click', () => {
  // Оновлюємо розмітку контейнера
  document.getElementById('container').outerHTML = outerHTMLInput.value;
  console.log(outerHTMLInput.value);
});
//# sourceURL=pen.js

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