Cleanup code to add div structure to element I was cleaning up my code when I came across this situation :

var a = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var count = 1;
var html = '';
for (var i = 0; i &lt; a.length; i++) {
    var rowStart = '&lt;div class="row"&gt;';
    var cell = '&lt;div class="c"&gt;';
    cell += '&lt;div class="title"&gt;' + a[i] + '&lt;/div&gt;';
    cell += '&lt;/div&gt;';
    var rowEnd = '&lt;/div&gt;';

    if (count == 1) {
        html += rowStart + cell;
        count++;
    } else if (count == 3) {
        html += cell + rowEnd;
        count = 1;
    } else {
        html += cell;
        count++
    }
}
$('#container').append(html);


jsFiddle

I retrieve data from a database which I want to display in a div structure as shown above. This code however looks ugly and I think it can be way shorter, I just don't know how.

I was hoping someone could give me some advice/methods/anything on how to clean up this code.
You should let CSS handle most of the job for you. Example

JS:

var a = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var count = 1;
var html = '';
for (var i = 0; i &lt; a.length; i++) {
    var div = $("&lt;div&gt;" + a[i] + "&lt;/div&gt;");
    $('#container').append(div);
}


CSS (where the magic is):

#container div:nth-child(3n+1) { /* Every third! */
    clear: both;
}

#container div {
    float: left;
    width: 100px;
}