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.

16 Responses to "Javascript Create New Div HTML Element Dynamically"
Sameer
really good tutorial . thanks :)
Anonymous
Awesome!!! Thank you! Just what I needed!
Dinesh
Really veru GOOD
mohammed
thk u man 4 this amazing tutorial
Ncik
Nice tutorial
t-bone
thank-you, very helpful
Hi, I'm creating a form that requires multiple entries. However, I don't want to show all the additional entries at once. I want a link such as "Add More Info", when the user clicks on the link, it opens a new form div so they can enter. They can add up to 20 additional info. Can someone please help me?
.... thank you bro.. it was really helpfull
malathy
It is not working in IE8 How to make it work?
KALAI
Really very nice tutorial it was helpfull
pradeep
hi, I would like to know about adding div element dynamically to my form. for example, i want to enter my education details in a form after adding basic education i want to add more like, post graduation for that i need to generate a div dynamically. please send me the details if poosible, if the solution is received appreciate for the work
Thanks for sharing it's very helpful...
Thanks, it very useful.
wow would be nice if this worked but it dont also before you post fake code you should make it look like you can position it lmao
JBB
Thanks! You have provided a clear and useful answer.
dhana
It's nice, this script helped me to complete my project...thank u so much dear....
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email