Somthing that works fine as regular HTML but not as JS

Hi,
I have a code that is basically just divs that are placed left to each other (basically like a table made out of divs).
this is the code:

<div class="superDivContainer" style="width: 1000px;">
	    <div class="dataTableTitle">
	        <div style="float: left; overflow: hidden; white-space: nowrap; padding-left: 3px; width: 200px;">ophir oren</div>
	        <div style="float: left; overflow: hidden; white-space: nowrap; padding-left: 3px; width: 200px;">ophir oren</div>
	        <div style="float: left; overflow: hidden; white-space: nowrap; padding-left: 3px; width: 200px;">ophir oren</div>
	        <div style="float: left; overflow: hidden; white-space: nowrap; padding-left: 3px; width: 200px;">ophir oren</div>
	        <div style="float: left; overflow: hidden; white-space: nowrap; padding-left: 3px; width: 180px;">ophir oren</div>
	    </div>
	</div>

Code (markup):

this code works fine.

now, what I am trying to do is writre this code so it will be created with javascript as so:

<script>
        var test1 = document.createElement("div");
        test1.className = "superDivContainer";
        test1.style.width = "1000px";
        document.getElementsByTagName("body")[0].appendChild(test1);
        
        var test2 = document.createElement("div");
        test2.className = "dataTableTitle";
        test1.appendChild(test2);
        
        for(i=0; i<5; i++)
        {
            var test3 = document.createElement("div");
            test3.style.float = "left";
            test3.style.overflow = "hidden"; //make the overflow hidden for that div
            test3.style.whiteSpace = "nowrap";
			test3.style.paddingLeft = "3px";
			test3.style.width = "100px";
			
			var titleText = document.createTextNode("test");
			test3.appendChild(titleText);
			
			test2.appendChild(test3);
        }
}
</script>

Code (markup):

for some reason that code doesn't work (not a JS problem). what is does, insted of printing the cells one next to each other, is print each one in a new line.

why does it work as regular HTML but not when you create with JS code? how can it be fixed?

 

Your JS doesn't do anything at all for me so I'm afraid I can't help. But my question is why are you trying to do this thru JS in the first place? I've never heard of anyone doing that.

 

I'm trying to write an automated table designer with various features.