HTML DOM outerHTML 属性
目录
语法
例子
注意
应用
DOM 接口的outerHTML属性获取描述元素（包括其后代）的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。
要仅获取元素内容的 HTML 表示形式或替换元素的内容，请使用 innerHTML 属性
语法
let content = element.outerHTML;返回时，内容包含描述元素及其后代的序列化 HTML 片段。
element.outerHTML = content;将元素替换为通过使用元素的父作为片段解析算法的上下文节点解析字符串内容生成的节点。
例子
获取一个元素的 outerHTML 属性的值：
// HTML:
/*
<div id="d"><p>Content</p><p>Further Elaborated</p>
</div>
*/const 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">This is a div.</div>
</div>
*/let container = document.getElementById("container");
let d = document.getElementById("d");console.log(container.firstChild.nodeName);
// logs "div"d.outerHTML = "<p>This paragraph replaced the original div.</p>";console.log(container.firstChild.nodeName);
// logs "P"/*#d div 不再是文档树的一部分，新段替换了它。(不在页面中显示，但仍然在内存中)
*/注意
如果元素没有父元素，即如果它是文档的根元素，则设置其 outerHTML 属性将抛出一个带有错误代码 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 。例如：
document.documentElement.outerHTML = "test";
// 抛出一个 DOMException此外，虽然元素将在文档中被替换，设置了 outerHTML 属性的变量仍将保持对原始元素的引用：
let p = document.getElementsByTagName("p")[0];
console.log(p.nodeName);
// 显示："P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";console.log(p.nodeName);
// 仍然为："P";应用
<!DOCTYPE html>
<html><body><h1>outerHTML</h1><p>单击按钮将标题从 h1 更改为 h3。</p><button onclick="myFunction()">Change Header</button><script>function myFunction() {var x = document.getElementsByTagName("h1")[0];x.outerHTML = "<h3>您更改了整个标题元素及其内容！</h3>";// 此处还是 h3 元素， 虽然元素将在文档中被替换，设置了 outerHTML 属性的变量仍将保持对原始元素的引用：console.log(x);}</script></body></html>