element.outerHTML

概述

outerHTML属性可以获取该DOM元素及其后代节点所形成的序列化的HTML片段，改变outerHTML属性可以用来把所属元素替换成为给定字符串解析后的DOM节点。

语法

var content = element.outerHTML;

outerHTML 属性返回了element元素本身及其后代元素形成的序列化的HTML片段。

element.outerHTML = content;

用解析字符串content形成的节点替换element元素。

例子

得到一个元素的 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>'
// 显示在console窗口中

通过改变 outerHTML 属性替换节点:

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

container = document.getElementById("container");
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"

// id为d的div元素已经不在文档树中(不在页面中显示,但仍然在内存中)
// 新的P元素替换了div元素

注意事项

如果一个元素是该文档的根节点，那么改变它的 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>This div replaced a paragraph.</div>";
console.log(p.nodeName); // 仍然为: "P";

规范

浏览器兼容性

• Desktop
• Mobile

相关链接

• MSDN: outerHTML 属性