Create Div Element Dynamically

JavaScript DOM methods and properties also provide the functionality to create the DIV element dynamically. You can also customize the appearance of DIV tag programatically using JavaScript style object properties.

JavaScript DOM Features Used

1. document object

2. createElement method

3. style object

4. ClassName property

5. margin property

6. innerHTML property

7. setAttribute method

8. id property

9. document.body.appendChild method

Try the sample below to learn and practice the JavaScript DOM code for creating the DIV element dynamically:

Edit this code and click update to view output

<html>
<head>
    <title>Javascript Create Div Element Dynamically</title>
    
    <style type="text/css">

.dynamicDiv {
    width:200px;
    height:100px;
    border:solid 1px #c0c0c0;
    background-color:#e1e1e1;
    font-size:11px;
    font-family:verdana;
    color:#000;
    padding:5px;
    }

</style>

function createDiv()
    {
        var divTag = document.createElement("div");
        
        divTag.id = "div1";
        
        divTag.setAttribute("align","center");
        
        divTag.style.margin = "0px auto";
        
        divTag.className ="dynamicDiv";
        
        divTag.innerHTML = "This HTML Div tag created using Javascript DOM dynamically.";
        
        document.body.appendChild(divTag);
    }

</script>
</head>
<body>

<p align="center">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onclick="createDiv();" />
    </p>
    
</body>
</html>

OUTPUT:

Get Code for this sample...

Previous Sample

Next Sample