Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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";

 

规范

Specification Status Comment
DOM Parsing and Serialization
Element.outerHTML
Living Standard  

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 11 (11) 0.2 4.0 7 1.3
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 11.0 (11) (Yes) (Yes) (Yes)

相关链接

文档标签和贡献者

 此页面的贡献者: teoli, AlexChao, ziyunfei
 最后编辑者: AlexChao,