Dynamically Create Boxes using jQuery

jQuery, css, background-color

by codeSpy

HTML

<div id="mainDiv">
    
</div>

CSS

#mainDiv div{
    float : left;
    padding:5px;
    width:50px;
    height:50px;
    left=100px;
    top=100px;  
}

JavaScript

$(document).ready(function(){
    var colorArray = new Array("red", "green", "gray", "blue");
    for(var i = 1; i <= colorArray.length + 1 ; i++){
        $("#mainDiv").append("<div id=Box" + i + "></div>");
        $("#Box"+ i).css("background-color", colorArray[i-1]);
    }
});