MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    element.outerHTML Redirect 1

    Summary

    The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

    Syntax

    var content = element.outerHTML;
    

    On return, content contains the serialized HTML fragment describing the element and its descendants.

    element.outerHTML = content;
    

    Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm.

    Examples

    Getting the value of an element's outerHTML property:

    // HTML:
    // <div id="d"><p>Content</p><p>Further Elaborated</p></div>
    
    d = document.getElementById("d");
    dump(d.outerHTML);
    
    // the string '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
    // is dumped to the console window
    

    Replacing a node by setting the outerHTML property:

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

    Notes

    If the element is the root node of the document, setting its outerHTML property will throw a DOMException with the error code NO_MODIFICATION_ALLOWED_ERR. For example:

    document.documentElement.outerHTML = "test";  // throws a DOMException
    

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

    Specification

    Specification Status Comment
    DOM Parsing and Serialization Living Standard  

    Browser compatibility

    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)

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,