When we assign ID for HTML entity for <p> tag or <div> tag, we can dynamically update its content.


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.

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