Javascript Append Div Contents

Updated on 23 Mar 2012,
Published on 08 Jul 2008

Javascript DOM provides number of methods to append Div tag contents dynamically. In Javascript code you can use innerHTML, innerText or appendChild methods to append the Div HTML tag’s contents. Same Javascript DOM methods can be used to append the content of other HTML elements also. You can concatenate the previous content and new content dynamically using document object along with its method getElementById.

Javascript getElementById method allows you to access the properties of specified HTML tag through its id attribute value passed to the getElementById method.

JavaScript DOM Examples:

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

Syntax for Javascript Append Div Contents Methods

document.getElementById("id").innerText = "value";

document.getElementById("id").innerHTML = "value";

document.getElementById("id").appendChild( newChild );

Above syntax codes for Javascript Append Div element content shows the innerText property that allows you to add plain text to the specified div element. innerHTML property allows you to insert HTML tags along with plain text into the specified Div to append its content. Last method of appendChild allows you to append Div with new HTML child elements along with dynamic text.

Example of Javascript Append Div Contents

<html>
<head>
    <title>Javascript Append Div Content 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 <b>HTML Div tag</b> "
                               + "is created using Javascript " 
                               + "DOM dynamically.";

            document.body.appendChild(divTag);

            var pTag = document.createElement("p");

            pTag.setAttribute("align", "center");

            pTag.innerHTML = "This paragraph <b>HTML p tag</b> "
                             + "is added dynamically inside the " 
                             + "div tag.";

            document.getElementById("div1").appendChild(pTag);
        }
    ]]>
    </script>
</head>
<body>
    <p align="center">
        <b>Click this button to Create and Append the Div content:</b>
        <input id="btn1" 
                type="button" 
                value="create div" 
                onclick="createDiv();" />
    </p>
</body>
</html>

Above example will create a new HTML <div> tag along with innerHTML and nested HTML p tag having text. HTML <p> tag is inserted as child element using the appendChild method of Javascript.

Output:

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

Append Div Content Dynamically

Continue to next tutorial: Javascript Create Span Using Document createElement to learn how to add HTML Span element into the HTML page body dynamically.

8 Responses to "Javascript Append Div Contents"
Sir i m just asking one thing that what is appendChild i m not geting it please help me so that i can use it mathod on our Site please send reply as soon as possible
its work for me. thanks!
Its not working for Opera 10
Here is my code

<script type="text/javascript" language="javascript">
function createDiv(d,t)
{
var pTag = document.createElement("b");
pTag.innerHTML = t+"<br>";
document.getElementById(d).appendChild(pTag);
}
</script>

</head>
<body>
<div id="div1">Tes123<br></div>
<script type="text/javascript" language="javascript">
createDiv("div1","http://www.avun.com");
</script>


is document.createElement is a must before appendChild?
whitefox
thanks...it helps me a lot....thank you...
chamil
Thanks a lot. You are great..
Thanks a lot it helps me
Thanks! Nice explanation!
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email