When you assign ID for HTML entity for <p> tag or <div> tag, we can dynamically update its content. You can find the object by getElementById(), and do the necessary actions into innerHTML. For instance, you can do it like document.getElementById( "element_id").innerHTML = "hello, world!";

Like I mentioned above, the way of coding is super simple.

1) Assign ID for HTML entity

2) Put necessary action using getElementById( entity_name ).innerHTML = blah blah...


Below example shows how to update internal content dynamically.

inner_html_demo.html
<html>
    <!-- Programmed by Chun Kang -->
    <head>
        <title>Inner HTML Test 1</title>
    </head>
    <script>
        function addContent(element_id, strContent)
        {
            document.getElementById( element_id).innerHTML += strContent;
        }
        function clearContent(element_id)
        {
            document.getElementById( element_id).innerHTML ="";
        }
    </script>
    <body>
        <p id="test1">Initial content...</p>
        <input type=button onclick="javascript:addContent('test1','<br>Hello Venus!');" value="Hello Venus!"><br>
        <input type=button onclick="javascript:addContent('test1','<br>Hello Robo!');" value="Hello Robo!"><br>
        <input type=button onclick="javascript:clearContent('test1');" value="Clear"><br>
    </body>
</html>