Javascript Reference - HTML DOM innerHTML Property








The innerHTML property sets or gets the HTML content of an element.

Browser Support

innerHTML Yes Yes Yes Yes Yes

Syntax

Return the innerHTML property:

var v = HTMLElementObject.innerHTML

Set the innerHTML property:

HTMLElementObject.innerHTML=text

Property Values

Value Description
text Set the HTML content of an element




Return Value

A String type value representing the HTML content of an element.

Example

The following code shows how to change the text of a <p> element.


<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">test</p>
<script>
function myFunction() {<!--from   w  w  w.  j a va2s .c  o m-->
    document.getElementById("demo").innerHTML = "changed!";
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to get the text of a <p> element.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--  w w  w .ja va2  s .  co  m-->
    console.log(document.getElementById("demo").innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to delete the text of a <p> element.


<!DOCTYPE html>
<html>
<body>
<p id="demo">text</p>
<!-- w  w w.j a v  a2s  . c o  m-->
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The inner html is change for the pre tag in the following code.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            pre {border: medium double black;} 
        </style> 
    </head> 
    <body> 
        <pre id="results"></pre> 
        <script> 
            var resultsElement = document.getElementById("results"); 
            resultsElement.innerHTML = "line\n"; 
        </script> 
    </body> 
</html><!--  www .  jav  a  2s.c  o  m-->

Click to view the demo

innerHTML vs outerHTML

The difference between innerHTML and outerHTML:

<!DOCTYPE HTML> 
<html> 
    <body> 
        <table> 
            <tbody> 
                <tr id="myRow"><td>A</td><td>B</td></tr> 
            </tbody> 
        </table> 
        <textarea rows="3" id="results"></textarea> 
        <button id="inner">Inner HTML</button> 
        <button id="outer">Outer HTML</button> 
        <script> 
            var results = document.getElementById("results"); 
            var row = document.getElementById("myRow"); 
            document.getElementById("inner").onclick = function() { 
                results.innerHTML = row.innerHTML; 
            }; <!-- ww  w .j  ava2  s .c  om-->
            document.getElementById("outer").onclick = function() { 
                results.innerHTML = row.outerHTML; 
            } 
        </script> 
    </body> 
</html>

Click to view the demo

HTML structure

You can use the outerHTML and innerHTML properties to change the structure of the document.

<!DOCTYPE HTML> 
<html> 
<body> 
    <table> 
        <tbody> 
            <tr><td>A</td><td>B</td></tr> 
            <tr id="myRow"><td>C</td><td>D</td></tr> 
        </tbody> 
    </table> 
    <br/>
    <table> 
        <tbody id="SurveysBody"> 
            <tr><td>E</td><td>F</td></tr> 
            <tr id="targetrow"><td colspan="2">X</td></tr> 
        </tbody> 
    </table> 
    <button id="move">Move Row</button> 
    <script> 
        document.getElementById("move").onclick = function() { 
            var source = document.getElementById("myRow"); 
            var target = document.getElementById("targetrow"); 
            target.innerHTML = source.innerHTML; 
            source.outerHTML = '<tr id="targetrow"><td colspan="2">' + 
                'This is the placeholder</td>'; 
        }; <!-- ww  w . ja  v  a2 s.c  om-->
    </script> 
</body> 
</html>

Click to view the demo