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

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

innerHTML property

Browser support:

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

The innerHTML 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 outerHTML property provides similar functionality, it sets or returns the source code including 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.

Note that the innerHTML property works a little different in Internet Explorer than in other browsers. If the contents of an element are set with the innerHTML property, Internet Explorer removes white spaces from the beginning and end of the specified value and collapses adjacent white spaces into a single space. Usually, that is the desired effect, but in some cases, it causes a problem. In case of textarea and pre elements, whitespaces are rendered so removing them modifies the appearance of the element.
What can you do if you want to set the contents of a textarea and pre element dynamically?

For textarea elements, use the value property.
In case of pre elements there are two possible solutions:
1. Replace whitespace characters with Entity references
2. Since Internet Explorer does not remove whitespaces from the value that are within pre elements, put such whitespaces within a pre element. For example, pre.innerHTML = "a b" sets the contents to a b, while pre.innerHTML = "<pre>a b</pre>" sets the contents to <pre>a b</pre>.

Syntax:

object.innerHTML;

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

The innerHTML property is read-only for the col, colgroup, frameset, head, html, style, table, tbody, tfoot, thead, title, tr and CommentNode elements in Internet Explorer. In Firefox, Opera, Google Chrome and Safari and in other cases in Internet Explorer, the innerHTML 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 shows how to modify or delete the HTML content of an element:

<head>
    <script type="text/javascript">
        function SetContent () {
            var div = document.getElementById ("myDiv");
            div.innerHTML = "The new <b>content</b>";
        }

        function DeleteContent () {
            var div = document.getElementById ("myDiv");
            div.innerHTML = "";
        }
    </script>
</head>
<body>
    <div id="myDiv">
        The original content
    </div>
    <button onclick="SetContent ();">Modify the HTML content of the div !</button>
    <br />
    <button onclick="DeleteContent ();">Delete the HTML content of the div!</button>
</body>