Element.outerHTML
Описание
Атрибут 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
элемента:
// 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 |
---|
HTML Standard # dom-element-outerhtml |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- MSDN: outerHTML Property