JQuery - generating a grid from a list of words
<p>Currently this script takes the words from the list and generates a grid, giving the words random positions each time. When the words are generated I want them to be split into individual characters, into cells next to each other so the word still makes sense - how do I do this? </p>

<pre><code>  var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", ];
 var shuffledWords = listOfWords.slice(0, 12);
 shuffledWords.sort(function () {
     return 0.5 - Math.random();
 });

 var table = $('&lt;table class="tablestyle"&gt;');
 var rows = 6;
 var cols = 2;
 var tr;
 var index;

 for (var row = 0; row &lt; rows; row++) {
     tr = $('&lt;tr&gt;');
     for (var col = 0; col &lt; cols; col++) {
         index = (row * cols) + col;
         $('&lt;td&gt;').text(shuffledWords[index]).appendTo(tr);
     }
     tr.appendTo(table);
 }

 table.appendTo('body');

 $('&lt;table&gt;' + innerTable + '&lt;/table&gt;').appendTo('body');
</code></pre>
