{{APIRef("DOM")}}
Атрибут outerHTML DOM-интерфейса {{ domxref("element") }} получает сериализованный HTML-фрагмент, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, полученными из заданной строки.
var content = element.outerHTML;
На выводе, content содержит сериализованный HTML-фрагмент, описывающий element и его потомки.
element.outerHTML = content;
Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm.
Получение свойства outerHTML элемента:
// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
d = document.getElementById("d");
console.log(d.outerHTML);
// строка '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// выведена в окно консоли
Замена ветки с помощью изменения свойства outerHTML:
// HTML:
// <div id="container"><div id="d">Это div.</div></div>
container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // логирует "DIV"
d.outerHTML = "<p>Этот параграф заменил исходный div.</p>";
console.log(container.firstChild.nodeName); // логирует "P"
// div #d больше не часть дерева документа,
// новый параграф заменил его.
Если у элемента нет родительской ветки, которая не является корневой веткой документа, установка его свойства outerHTML выбросит исключение DOMException с кодом ошибки NO_MODIFICATION_ALLOWED_ERR. Например:
document.documentElement.outerHTML = "test"; // бросает DOMException
Обратите внимание, когда произойдёт изменение элемента в документе, переменная, у которой было установлено свойство outerHTML, будет по-прежнему хранить ссылку на оригинальный элемент:
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // показывает: "P"
p.outerHTML = "<div>Этот div заменил параграф.</div>";
console.log(p.nodeName); // всё ещё "P";
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}} | {{ Spec2('DOM Parsing') }} |
{{Compat}}