Element.outerHTML

在此页

句法
范例
注意事项
规范
浏览器兼容性
另请参阅
相关话题

outerHTML 属性在 元素 DOM 接口获取描述元素 (包括其后代) 的序列化 HTML 片段。也可以设置它为把元素替换为剖析自给定字符串的节点。

要仅获得元素内容的 HTML 表示，或替换元素内容，使用 innerHTML 特性代替。

句法

var content = element.outerHTML;
element.outerHTML = htmlString;

值

Reading the value of outerHTML 返回 DOMString containing an HTML serialization of the element and its descendants. Setting the value of outerHTML replaces the element and all of its descendants with a new DOM tree constructed by parsing the specified htmlString .

异常

SyntaxError: An attempt was made to set outerHTML using an HTML string which is not valid.
NoModificationAllowedError: An attempt was made to set outerHTML on an element which is a direct child of a Document ，譬如 Document.documentElement .

范例

获取值在元素的 outerHTML 特性：

HTML

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

Javascript

var 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

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

Javascript

var container = document.getElementById("container");
var 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"
// The #d div is no longer part of the document tree,
// the new paragraph replaced it.

注意事项

若元素没有父级元素，设置其 outerHTML 特性不会改变它或其后代。许多浏览器还会抛出异常。例如：

var div = document.createElement("div");
div.outerHTML = "<div class=\"test\">test</div>";
console.log(div.outerHTML); // output: "<div></div>"

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element:

var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // shows: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // still "P";

The returned value will contain html escaped attributes:

var anc = document.createElement("a");
anc.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>"

规范

规范	状态	注释
DOM 剖析和序列化 The definition of 'Element.outerHTML' in that specification.	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`outerHTML`	Chrome 33 33 This API was previously available on the `节点` API。	Edge 12	Firefox 11	IE 4	Opera 8	Safari 9	WebView Android 4.4 4.4 This API was previously available on the `节点` API。	Chrome Android 33 33 This API was previously available on the `节点` API。	Firefox Android 14	Opera Android 10.1	Safari iOS 9	Samsung Internet Android 2.0 2.0 This API was previously available on the `节点` API。

图例

完整支持

另请参阅

Serializing DOM trees into XML or HTML: XMLSerializer
Parsing XML or HTML into DOM trees: DOMParser
HTMLElement.outerText

元数据

最后修改： Feb 7, 2020

在此页

句法

值

异常

范例

HTML

Javascript

HTML

Javascript

注意事项

规范

浏览器兼容性

图例

另请参阅

相关话题