Элемент: свойство outerHTML

Свойство outerHTML интерфейса DOM Element получает сериализованный фрагмент HTML, описывающий элемент, включая его потомков. Его также можно установить, чтобы заменить элемент узлами, разобранными из данной строки.

Чтобы получить только представление HTML содержимого элемента или заменить содержимое элемента, используйте свойство innerHTML вместо этого.

Чтение значения outerHTML возвращает строку, содержащую HTML-сериализацию element и его потомков. Установка значения outerHTML заменяет элемент и всех его потомков новой деревом DOM, созданной путем разбора указанного htmlString.

При установке в null значение null преобразуется в пустую строку (""), поэтому elt.outerHTML = null эквивалентно elt.outerHTML = "".

SyntaxError DOMException

Выбрасывается, если была предпринята попытка установить outerHTML с помощью строки HTML, которая не является допустимой.

NoModificationAllowedError DOMException

Выбрасывается, если была предпринята попытка установить outerHTML для элемента, являющегося прямым потомком Document, например, Document.documentElement.

HTML

<div id="d">
  <p>Content</p>
  <p>Further Elaborated</p>
</div>

JavaScript

const d = document.getElementById("d");
console.log(d.outerHTML);

// The string '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// is written to the console window

HTML

<div id="container">
  <div id="d">This is a div.</div>
</div>

JavaScript

const container = document.getElementById("container");
const d = document.getElementById("d");

console.log(container.firstElementChild.nodeName); // logs "DIV"

d.outerHTML = "<p>This paragraph replaced the original div.</p>";

console.log(container.firstElementChild.nodeName); // logs "P"

// The #d div is no longer part of the document tree,
// the new paragraph replaced it.

Если у элемента нет родительского узла, установка его свойства outerHTML не изменит его или его потомков. Например:

const div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
console.log(div.outerHTML); // output: "<div></div>"

Также, хотя элемент будет заменён в документе, переменная, для которой было установлено свойство outerHTML , по-прежнему будет содержать ссылку на исходный элемент:

const p = document.querySelector("p");
console.log(p.nodeName); // shows: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // still "P";

Возвращаемое значение будет содержать атрибуты, закодированные в HTML:

const anc = document.createElement("a");
anc.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>"

• Сериализация деревьев DOM в XML-строки: XMLSerializer
• Разбор XML или HTML в деревья DOM: DOMParser
• HTMLElement.outerText