Change Div InnerHTML

JavaScript Change Div innerHTML functionlaity can be developed by using JavaScript DOM innerHTML property. In this sample innerHTML property of the object returned by getElementById method of JavaScript DOM has been used to change the innerHTML of Div element dynamically.

JavaScript DOM Features Used

1. document object

2. getElementById method

3. innerHTML property

Try the sample below to learn and practice the JavaScript DOM code for developing this functionality:

Edit this code and click update to view output

<html>
<head>
    <title>Javascript Change Div InnerHTML</title>
    
    <script language="javascript" type="text/javascript">

function changeDivHTML()
    {
        var previousInnerHTML = new String();
        
        previousInnerHTML = document.getElementById('div1').innerHTML;
        
        previousInnerHTML = previousInnerHTML.concat("<h1>New HTML Text added to the div HTML tag.</h1>");
        
        previousInnerHTML = previousInnerHTML.concat("<p align=\"center\">Paragraph child HTML element added<br /> to the div tag dynamically.</p>");
        
        previousInnerHTML = previousInnerHTML.concat("<span style=\"color:#ff0000\">Span child HTML element added to the div tag dynamically.</span>");
        
        document.getElementById('div1').innerHTML = previousInnerHTML;
    }
    
    </script>

</head>

<body>

<div id="div1">
        <b>innerHTML</b> placed inside the <b>div</b> element of HTML.<br />
        Javascript will change the innerHTML of this HTML div element.
    </div>
    <center>
        <input type="button" value="Change Div innerHTML" onclick="changeDivHTML()" />
    </center>
</body>
</html>

OUTPUT:

Get Code for this sample...

Previous Sample

Next Sample