Javascript Create New Div HTML Element Dynamically

Updated on 23 Mar 2012,
Published on 08 Jul 2008

Javascript DOM features provide the functionality to create new HTML elements such as div, span, paragraph p tag etc. dynamically. document.createElement method of Javascript DOM provides the feature to create new div HTML element or other HTML elements dynamically. You can pass the name of the HTML tag that you want to create to the createElement method of document object. The object created by createElement method can access all the supported properties, functions and methods of document.documentElement method of Javascript. You can access the methods such as setAttribute, style, id and title etc.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Syntax for Javascript createElement method

document.createElement("HTML element name");

Above syntax of Javascript document. createElement method shows that you can pass the name of HTML Tag you want to insert into the HTML document.

document.createElement("div")

Above example code will create an instance for new div HTML element in Javascript.

Example of Javascript Create New Div HTML Element Dynamically

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

    <script type="text/javascript" language="javascript">
    <![CDATA[
        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:

You can see the output of above discussed codes from the following link:

Create Div Element Dynamically

In the above example Javascript code to create new div HTML tag we have used the appendChild method for document body element. appendChild method takes one parameter as the name of the object of newChild that you want insert into the specified HTML tag like body tag in the above example. You can use the document.getElementById method of javascript passing the id value of any HTML tag along with appendChild method to insert the dynamic new HTML element into the specified id of the HTML tag.

Continue to next tutorial: Javascript Append Div Contents to learn how to create and append the HTML Div element dynamically.

Previous Tutorial

Next Tutorial