How to create DIV elements when a button is clicked

Hello,
I am trying to create rectangular boxes (DIV elements) one at a time when a user clicks a command button. I am trying to create absolute positioned DIV elements with numbers on them. Ex: Rectangle 1, Rectangle 2, etc.

This is my code:

<script language="Javascript">
var i=1;
function creatediv()
{
mNewObj = document.createElement('div');
mNewObj.id = "BOX" + i;
mNewObj.style.backgroundColor="red";
mNewObj.style.visibility="show";
mNewObj.innerText = "Box " + i;
document.getElementById("tid").appendChild(mNewObj);
alert(mNewObj.innerText);
i++;
}
</script>

<div id="tid"></div>
<form method="post">
<input type="button" value="Create Box" onclick="creatediv()">
</form>

Code (markup):

I am seeing no DIV elements when clicking the command button.

Please help!!!

 

There's no property called innerText, it's innerHTML. Change the code to this:

<script language="Javascript">
var i=1;
function creatediv()
{
mNewObj = document.createElement('div');
mNewObj.id = "BOX" + i;
mNewObj.style.backgroundColor="red";
mNewObj.style.visibility="show";
mNewObj.innerHTML = "Box " + i;
document.getElementById("tid").appendChild(mNewObj);
alert(mNewObj.innerHTML);
i++;
}
</script>

<div id="tid"></div>
<form method="post">
<input type="button" value="Create Box" onclick="creatediv()">
</form>

Code (markup):

 

^There is an innerText property which returns text inside an element after stripping HTML tags.

 

btw is BOX variable declared in your code? I cudn't find that. And probabaly thats causing the error!

 

BOX is not a variable, but a string. My code is working fine.

 

Hie, how do I create multiple such div's on button click
for example, on choosing a drop down list item and then clicking on a button a div should get created and then on next drop down list item on select and then on button click another div should get created besides it.
Can the div be created based on user entered values of width and height of the div?
Please Help!
thanks!

 

Only in IE, it's not W3C-standard. Unless you can control that all your users will be using IE, don't use innerText.

 

Well there should be multi-browser support,
and I have observed that on button click, there is a page refresh
and the original image dissapears :-(

 

Also innerText is read-only, and only works in IE and Opera. The value for FF and Chrome is textContent, and you can check for that using document.all

Which is all well and good for your echo, but not for adding the text to the element. To do that you should be creating a new textnode as a child of the DIV using document.createTextNode.

Also, visible should be the default state unless you've got something goofy going on in your CSS, so lose that -- and no matter what the post 2000 script kiddies will tell you, to keep the code clean and simple use the WITH statement for document and your new element -- likewise evaluation scoping can also be leveraged to keep things clean. I would also suggest somewhat more verbose names on things, not using a form if that's not actually having a proper submit and instead style something like a span. (and don't forget to include some NOSCRIPT there)... and of course since you've got a perfectly good parent ID there's no reason to hardcode the appearance into the scripting -- that's CSS' job.

<style type="text/css">
#userAddedDiv div {
	background:red;
}

.createBoxButton {
	display:inline-block;
	padding:2px 8px;
	vertical-align:middle;
	text-decoration:none;
	color:#000;
	background:#CCC;
	border:2px solid #888;
	border-radius:8px;
}

.createBoxButton:active,
.createBoxButton:hover {
	background:#DDD;
}
</style>

<script type="text/javascript">
var numberOfDiv=0;
function createDiv() {
	++numberOfDiv;
	with (document) {
		var newDiv = createElement('div');
		with (newDiv) {
			id='BOX'+numberOfDiv;
			appendChild(createTextNode('Box '+numberOfDiv));
		}
		getElementById('userAddedDiv').appendChild(newDiv);
		if (document.all) {
			alert(newDiv.innerText);
		} else {
			alert(newDiv.textContent);
		}
	}

}

document.write(
	'<div id="userAddedDiv"></div>' +
	'<a href="javascript:createDiv();" class="createBoxButton">Create Box</a>'
);
</script>

<noscript>
	<div class="warning">This requires javascript to function</div>
</noscript>

Code (markup):

Should do what you are asking... and then some.