mozilla
您的搜索结果

    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)

    相关链接

    文档标签和贡献者

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