Question : IE javascript alternative to innerHtml

Hello,

I'm dynamically setting a div's innerHtml property before the page loads and I'm getting different results between Internet Explorer and other browsers. It basically only adds one of my sub elements to the div instead of all of the elements. I'm addng a <ul><li>image links to the div. Is there an alternative to using this property that will work for all browsers? I need to also dynamically set the style class of the div. Any suggestions? Below is my html, div id of "thumbs" is the dynamic div that I populate via javascript.

JS: - executed via window.onload = function()

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
<script>
var image_div = document.getElementById('thumbs');
		var xmldoc = xhr.responseXML;
		var images = xmldoc.getElementsByTagName("image"); 
		var n_images = images.length
		//alert("image length=" + n_images);
		var htmlTags='';
		for (i = 0; i < n_images; i++) {
			htmlTags += '<li><a class="thumb" href="testimages/'+images[i].firstChild.nodeValue+'" title="Title #0"><img src="testimages/'+images[i].firstChild.nodeValue+'" alt="Title #0" width=75 height=75/></a><div class="caption"><div class="download"><a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg></a></div><div class="image-title"></div><div class="image-desc"></div></div></li>';	
		}

		image_div.innerHTML = '<ul class="thumbs noscript">' + htmlTags + '</ul>'; 

</script>

HTML:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
<body>
	<div><a href="/admin.php">Admin</a></div>
		<div id="page">
			<div id="container">
				<h1><a href="index.html">Gallery</a></h1>
				<!-- Start Advanced Gallery Html Containers -->
				<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>
				[b]<div id="thumbs" class="navigation">
								
				</div>[/b]
				<div style="clear: both;"></div>
			</div>
		</div>
		
	</body>

Answer : IE javascript alternative to innerHtml

>I need to also dynamically set the style class of the div
Use : divname.className = "classToSet";
or : divname.setAttribute("className","classToSet");

Check this :

If you need more help could you post the xmldoc you get with alert(xhr.responseText) for example ?

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function init() {
		var image_div = document.getElementById('thumbs');
		var xmldoc = xhr.responseXML;
		var images = xmldoc.getElementsByTagName("image"); 
		var n_images = images.length
		//alert("image length=" + n_images);
		var htmlTags='';
		for (i = 0; i < n_images; i++) {
			var li = document.createElement("li");

			var a1 = document.createElement("a");
			a1.setAttribute("className", "thumb");
			a1.setAttribute("href", "testimages/" + images[i].firstChild.nodeValue);
			a1.setAttribute("title","Title #0");

			var img = document.createElement("img");
			img.setAttribute("src", "testimages/" + images[i].firstChild.nodeValue);
			img.setAttribute("alt","Title #0");
			img.setAttribute("width", "75");
			img.setAttribute("height", "75");

			var div1 = document.createElement("div");
			div1.setAttribute("className", "caption");

			var div2 = document.createElement("div");
			div2.setAttribute("className", "download");

			var a2 = document.createElement("a");
			a2.setAttribute("href","http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg");

			var div3 = document.createElement("div");
			div3.setAttribute("className","image-title");

			var div4 = document.createElement("div");
			div4.setAttribute("className","image-desc");

			a1.appendChild(img);
			li.appendChild(a1);
			
			div2.appendChild(a2);
			
			div1.appendChild(div2);
			div1.appendChild(div3);
			div1.appendChild(div4);
			
			li.appendChild(div1)

			var ul = document.createElement("ul");
			ul.setAttribute("className", "thumbs noscript");
			ul.appendChild(li);

			image_div.appendChild(ul); 
		}
	}
</script>
</head>
<body onload="init();">
	<div><a href="/admin.php">Admin</a></div>
		<div id="page">
			<div id="container">
				<h1><a href="index.html">Gallery</a></h1>
				<!-- Start Advanced Gallery Html Containers -->
				<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>
				[b]<div id="thumbs" class="navigation">
								
				</div>[/b]
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
</html>

           
         