In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > outerHTML

outerHTML property

Browser support:

Sets or retrieves the outer HTML content (the source code including the opening and closing tags) of an element.

The outerHTML property is useful if you want get the source of an element at runtime and if you want to replace the source code of an element with HTML formatted text.

The innerHTML property provides similar functionality, it sets or retrieves the source code excluding the opening and closing tags of the element.

If you need the pure text content of an element (without HTML tags), use the innerText, textContent and outerText properties.

The insertAdjacentHTML method can also be used to insert HTML formatted text into the document.

Syntax:

object.outerHTML;

You can find the related objects in the Supported by objects section below.

The outerHTML property is read-only for the caption, col, colgroup, frameset, head, html, tbody, td, tfoot, th, thead, title, tr and CommentNode elements in Internet Explorer. In Opera, Google Chrome, Safari and in other cases in Internet Explorer, the outerHTML property is read/write.

Possible values:

String that specifies or retrieves the HTML content.

Default: this property has no default value.

Example HTML code 1:

This example shows how to get the contents of an element:

<head>
    <script type="text/javascript">
        function GetContent () {
            var elem = document.getElementById ("myDiv");
            var message = "";
            if ('outerHTML' in elem) {
                message += "outer HTML : " + elem.outerHTML;
            }
            if ('outerText' in elem) {
                message += "\nouter text : " + elem.outerText;
            }

            message += "\ninner HTML : " + elem.innerHTML;

            if ('textContent' in elem) {
                message += "\ninner text : " + elem.textContent;
            }
            else {
                message += "\ninner text : " + elem.innerText;
            }
            
            alert (message);
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This is a division element that contains some <span style="color: red">red text</span>.
    </div>
    <br /><br />
    <button onclick="GetContent ();">Get the contents of the division element!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements similar functionality to the outerHTML property in Firefox:

<head>
    <script type="text/javascript">
        function GetContent () {
            var elem = document.getElementById ("myDiv");
            if (elem.outerHTML) {
                alert (elem.outerHTML);
            }
            else {  // Firefox
                var attributes = elem.attributes;
                var attrs = "";
                for (var i = 0; i < attributes.length; i++) {
                    attrs += " " + attributes[i].name + "=\"" + attributes[i].value + "\"";
                }
                alert ("<" + elem.tagName + attrs + ">" + elem.innerHTML + "</" + elem.tagName + ">");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This is a div element. Between the start and end tag is a <b>Bold element</b> and an <i>Italic element</i>.
    </div>
    <button onclick="GetContent ();">Get the outer contents of the div element!</button>
</body>