元素：outerHTML 属性

outerHTML 是 Element DOM 接口的一个属性，它获取描述元素及其后代的序列化 HTML 片段。它也可以被设置为用从给定字符串解析的节点替换元素。

要仅获取元素内容的 HTML 表示形式，或替换元素的内容，请改用 innerHTML 属性。

值

读取 outerHTML 的值将返回一个包含 element 及其后代的 HTML 序列化字符串。设置 outerHTML 的值将用通过解析指定的 htmlString 构造的新 DOM 树替换元素及其所有后代。

当设置为 null 值时，该 null 值将转换为空字符串 ("")，因此 elt.outerHTML = null 等效于 elt.outerHTML = ""。

异常

SyntaxError DOMException

如果尝试使用无效的 HTML 字符串设置 outerHTML，则会抛出此异常。

NoModificationAllowedError DOMException

如果尝试在作为 Document 的直接子元素的元素（例如 Document.documentElement）上设置outerHTML，则会抛出此错误。

示例

获取元素的 outerHTML 属性的值

HTML

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

JavaScript

js
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

通过设置 outerHTML 属性替换节点

HTML

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

JavaScript

js
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属性将不会改变它或其子元素。例如

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

此外，虽然元素将在文档中被替换，但设置了outerHTML属性的变量仍然会持有对原始元素的引用。

js
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 编码的属性。

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

规范

规范
HTML 标准
# dom-element-outerhtml

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅