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

On 10.27.08, In HTML, JavaScript, by
Tags: ,
Share
Advertisement
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

Articles which you would like to read:

admin

Visit Authors Website  |  All Articles From This Author

You Might Like:

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

Devin Netley
10.27.08

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

juneau
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

Write For Us

Daily Favorite Design & Development News


Warning: file_get_contents(http://twitter.com/favorites/developsnippets.json?page=) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/vivekanand/developersnippets.com/wp-content/themes/convergence/favorites_dev_widget.php on line 26

Warning: Invalid argument supplied for foreach() in /home/vivekanand/developersnippets.com/wp-content/themes/convergence/favorites_dev_widget.php on line 71
Daily Favorite Design & Development News