Way to generate several similar divs?

Question

I am working on a project that involves creating our own version of Conway's "Game of Life". I went for a simple representation of my 20x20 grid as many nested divs - the entire grid is a div, each row is a div, and each cell within that is also a div.

My code is working just fine, but I am wondering in retrospect if there was an easier way to create my divs using html/javascript/jquery other than brute-forcing copy-pasting it out. It's something I would naturally think to do with for-loops if it were not HTML, which I don't know very much about.

Is there an easy way to do this?

to create identical copies of divs you can use jquery clone http://api.jquery.com/clone/ — Sainath Motlakunta, Sep 22 '14 at 17:09
You *can* use `for` loops to *generate* HTML. In template engine, or JS, PHP, etc. Then, related: http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery — OJFord, Sep 22 '14 at 17:15
I put together a simple example for you: http://jsfiddle.net/387gb4cv/1/. You probably want to generate unique id's for each cell as well so you can reference them later. This is a good start though! — drew_w, Sep 22 '14 at 17:15

score 0 · Accepted Answer · answered Sep 22 '14 at 17:12

you can create elements using jquery. So if your trying to create a div element you can do this for example:

var grid = $('<div class="grid"></div>');
for (var i = 0; i < 20; i++) { 
 var row = $('<div class="row"></div>')  
 for (var j = 0; j < 20; k++) {
   var cell = $('<div class="cell"></div>');
   row.append(cell);
 }
 grid.append(row);
}

So if you do something like that you can create your grid using JS

score 0 · Answer 2 · answered Sep 22 '14 at 17:19

Using for loops and innerHTML:

function makeTable(width, height) {
    var row, col, table = document.createElement('div'), html = '';
    for (row = 0; row < height; row += 1) {
        html += '<div class="row">';
        for (col = 0; col < width; col += 1) {
            html += '<div class="cell" id="c' + row + '_' + col + '"></div>';
        }
        html += '</div>';
    }
    table.className = 'game';
    table.innerHTML = html;
    return table;
}
document.getElementById('target').appendChild(makeTable(20, 20));

You can also convert the HTML code that you're building up into a DOM tree with jQuery via $('html_code_here') which has the same effect as placing it as the innerHTML of a DIV element; this just uses that to generate the table element. Individual cells are given indexes like c_1_1, c_1_2, ..., c_20_20 for your addressing.

Way to generate several similar divs?

2 Answers2