Adding a div, button to the body tag dynamically using JavaScript DOM

Post Pic

Here is a simple snippet on adding a “div” to the body tag dynamically using JavaScript, after going through this article you might be able to add a simple “div” to the body tag dynamically using JavaScript. If you guys! see the code its very simple to understand and to implement as well.

JavaScript Code:
Below is the JavaScript code which depicts the same:

1
2
3
4
5
6
7
8
9
10
function toCreateDiv()
{
	var x = document.createElement('div');
	x.setAttribute('id','div1');
	x.setAttribute('style','background-color:blue');
	x.innerHTML="DeveloperSnippets";
	document.getElementById('attachDIV').appendChild(x);
	document.getElementById('div1').innerHTML='
<input type="button" value="Click" onclick="toAddDiv()" />';
}

HTML Code:
Below is the simple HTML code, on body load event I am calling a function named ‘toCreateDiv()’ which will takes care about the same.

1
2
<body onload="toCreateDiv()" id="attachDIV">
</body>

Explanation of the JavaScript Code:

The below line will create and Element called ‘div’

1
var x = document.createElement('div');

Below three lines will sets the attribute id,style to that ‘div’ and in final line it will add some text like “DeveloperSnippets”

1
2
3
x.setAttribute('id','div1');
x.setAttribute('style','background-color:blue');
x.innerHTML="DeveloperSnippets";

In the below lines, the first line will append the ‘div’ which we have created and which has id=’div1′ and style=’background-color:blue’ and in the second line we are inserting an input type button to that created div that is ‘div1′ using innerHTML

1
2
3
document.getElementById('attachDIV').appendChild(x);
document.getElementById('div1').innerHTML='
<input type="button" value="Click" onclick="toAddDiv()" />';

We can use the above script for other scenarios as well like inserting or adding any HTML element to another HTML element through DOM (Document Object Model).

Related articles which you would like to read:
1. Placing a Play Icon over the image using CSS
2. Snippet Code for Simple Ajax Tabs with cool CSS Styles
3. Simple steps to develop AJAX Website – DeveloperSnippets
4. JavaScript Visitors Browser Detection Code Snippet
5. Netscape is the ‘navigator.appName’ for Google Chrome
6. Error: Invalid source HTML for this operation
7. System Error: -1072896658 in IE

Related Entries...

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

4 Responses

Sexy dommes like this one makes my day like nothing else please post some more i ll be thankful

10.27.08

I love this posts . Post more and thanks to all the mistress!

10.27.08

This post saves my day.

is there a way that i can remove added div?

thanks!

Thanks for news.

Leave Your Response

* Name, Email, Comment are Required