I'm trying to use jquery's clone() to create multiple sprite-like DIV's, crashes browser
<p>After finding the latest version of Crafty's game API seems to fail in IE8, I thought I would get back to my friend JQuery, to create a few simple board games.</p>

<p>I started off with 3 DIV's, a black tile, a white tile, and blank tile, set Display:none</p>

<p>Then I thought to clone the blank tile to the dimensions of whatever board game I desired.
Using a simple double for loop, when set to 8x8 it crashes the browser, when set to 2x2 it is slow, can someone suggest me ways to improve the performance?</p>

<p>The CSS:</p>

<pre><code>&lt;style&gt;
    .white {
        position:relative;
        width:57px;
        height:57px;
    }
    .white img {
        position:absolute;
        width:171px;
        height:57px;
        left:-57px;
        top:0px;
        clip:rect(0px, 114px, 57px, 57px); 
     }
    .blank {
        position:relative;
        width:57px;
        height:57px;
     }
    .blank img {
        position:absolute;
        width:171px;
        height:57px;
        left:-114px;
        top:0px;
        clip:rect(0px, 171px, 57px, 114px); 
     }
    .black {
        position:relative;
        width:57px;
        height:57px;
     }
    .black img {
        position:absolute;
        width:171px;
        height:57px;
        left:0px;
        top:0px;
        clip:rect(0px, 57px, 57px, 0px); 
     }
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;div class="white" style="display:none"&gt;
   &lt;img src="images/sprites.png" alt=""&gt;
&lt;/div&gt;

&lt;div class="black" style="display:none"&gt;
   &lt;img src="images/sprites.png" alt=""&gt;
&lt;/div&gt;

&lt;div class="blank" style="display:none"&gt;
   &lt;img src="images/sprites.png" alt=""&gt;
&lt;/div&gt;

&lt;div class="start"&gt;
&lt;/div&gt;
</code></pre>

<p>The jquery:</p>

<pre><code>$(document).ready(function()  {     
    B_W = 456;
    B_H = 456;
    B_X = 8;
    B_Y = 8;
    SQ_W = 57;
    SQ_H = 57;

    var i=0;
    var j=0;

    for(i = 0; i &lt; B_X; i++) {
        for(j = 0; j &lt; B_Y; j++) {
                $('.blank').clone()
                    .insertAfter('.start')
                    .css({
                        'position':'absolute', 
                        'top' : j * SQ_H + 'px', 
                        'left' : i * SQ_W + 'px', 
                        'display' : 'block'
                    });
        }
    }
});
</code></pre>
