Element.outerHTML

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Описание

Атрибут outerHTML DOM-интерфейса 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 элемента:

js
// 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:

js
// 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. Например:

js
document.documentElement.outerHTML = "test"; // бросает DOMException

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

js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // показывает: "P"
p.outerHTML = "<div>Этот div заменил параграф.</div>";
console.log(p.nodeName); // всё ещё "P";

Спецификации

Specification
HTML
# dom-element-outerhtml

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outerHTML

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также