Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE issue with appendChild() 1

Status
Not open for further replies.
rcp032

rcp032

Technical User
Sep 21, 2006
44
US
Well - as near as I can figure its an IE issue. I use this code to draw a box inside a box (div's) and it works fine with FF and Opera, well it works the way I expect it to. But in IE it does nothing.

Can anyone see what I am doing wrong or know a work around?

Code: 
<body>
Box n Box Java test
</body>

<script language="javascript">

var d01 = document.createElement("div");
d01.setAttribute("id", "d_01"); 
d01.setAttribute("style", "height:150px; width:150px; position:absolute; background-color: #660066;top:50px; left:50px; ");
document.body.appendChild(d01); 

var d02 = document.createElement("div");
d02.setAttribute("id", "d_02"); 
d02.setAttribute("style", "height:50px; width:50px; position:absolute; background-color: #ffffff;top:50px; left:50px; ");
d01.appendChild(d02); 
</script>
 
Sort by date Sort by votes
You're missing html and head elements for starters. IE also has issues with set/getAttribute, but it's most likely down to trying to set the style with "setAttribute" - this just isn't a good way to do things, as it's not really an attribute, but a collection. Try this instead:

Code: 
<html>
<head>
	<script type="text/javascript">

		window.onload = function() {
			var body = document.getElementsByTagName('body')[0];
			
			var d01 = document.createElement('div');
			d01.id = ''d_01';
			d01.style.height = '150px';
			d01.style.width = '150px';
			d01.style.position = 'absolute';
			d01.style.backgroundColor = '#660066';
			d01.style.top = '50px';
			d01.style.left = '50px';
			body.appendChild(d01);

			var d01 = document.createElement('div');
			d02.id = ''d_02';
			d02.style.height = '50px';
			d02.style.width = '50px';
			d02.style.position = 'absolute';
			d02.style.backgroundColor = '#FFFFFF';
			d02.style.top = '50px';
			d02.style.left = '50px';
			body.appendChild(d01);
		}
	</script>
</head>

<body>
	Box n Box Java test
</body>
</html>

Or this, if you prefer using CSS to style rather than JS:

Code: 
<html>
<head>
	<style type="text/css">
		#d_01 {
			height: 150px;
			width: 150px;
			position: absolute;
			background-color: #660066;
			top: 50px;
			left: 50px;
		}
		
		#d_02 {
			height: 50px;
			width: 50px;
			position: absolute;
			background-color: #FFFFFF;
			top: 50px;
			left: 50px;
		}
	</style>

	<script type="text/javascript">

		window.onload = function() {
			var body = document.getElementsByTagName('body')[0];
			
			var d01 = document.createElement('div');
			d01.id = ''d_01';
			body.appendChild(d01);

			var d01 = document.createElement('div');
			d02.id = ''d_02';
			body.appendChild(d01);
		}
	</script>
</head>

<body>
	Box n Box Java test
</body>
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
324
JScannell
JScannell
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
80
JPSeo
JPSeo
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
111
ggriffit
ggriffit
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
132
waubain
waubain
chelares
  • Locked
  • Question
Issues with Tables
Replies
2
Views
93
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top