Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 < a.length; i++) {
    var rowStart = '<div class="row">';
    var cell = '<div class="c">';
    cell += '<div class="title">' + a[i] + '</div>';
    cell += '</div>';
    var rowEnd = '</div>';

    if (count == 1) {
        html += rowStart + cell;
    } else if (count == 3) {
        html += cell + rowEnd;
        count = 1;
    } else {
        html += cell;


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.

share|improve this question
What kind of browser support do you need? – Madara Uchiha Jun 10 '14 at 12:43
I need support for all major browsers: Chrome, Firefox, Safari, Opera and IE – RobinvdA Jun 10 '14 at 13:10
up vote 7 down vote accepted

You should let CSS handle most of the job for you. Example


var a = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var count = 1;
var html = '';
for (var i = 0; i < a.length; i++) {
    var div = $("<div>" + a[i] + "</div>");

CSS (where the magic is):

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

#container div {
    float: left;
    width: 100px;
share|improve this answer
The general rule here is: What can reasonably be done with CSS over JavaScript, should be done with CSS over JavaScript. – Madara Uchiha Jun 10 '14 at 16:21

It sounds like you want a JavaScript Template Engine to render raw data into HTML. JavaScript template engines also pair well with a view resolver like Bloodhound (which I wrote).

Edit #1: If you need something lighter weight this would suffice:

function render(template, data) {
    return template.replace(/#\{(\w+)}/g, function(tag, key) {
        return (key in data) ? data[key] : "";

And to use:

var template = document.getElementById("template").innerHTML,
    html = render(template, {
        title: "Just a Render Test",
        price: 22.85

document.getElementById("output").innerHTML = html;


share|improve this answer
Hmm never heard of template engines. I just looked into it but i think it's a bit too much for my goal isn't it? – RobinvdA Jun 10 '14 at 13:13
It all depends on how many time you need to render a template. If this is the only place, then a template engine might be a bit much. Updating my answer with another idea. – Greg Burghardt Jun 10 '14 at 13:16
To who ever down-voted my answer, I've updated it given @RobinvdA's comment. – Greg Burghardt Jun 10 '14 at 14:15

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.