writing to html from a javascript loop "when it happens"

The problem is, that your while loops are to fast. You would not see the output live. The browser needs some time to update the document. The reason you can see it each-by-each in the console, is just because the console is to slow. The console outputs the lines with a delay. When you see the last entry in your console is comming up, your code has already ended a long time before. Your code execution is mutch faster than the console. So this is not in time too.

It is pretty easy to show how slow the console really is. Take a look at this example. When executed there is a simple loop creating log entries in the console. After that we just print loop finished to the content. When you see the output in the document, the console still print lines, even if the script has already stopped.

You could now try to give the browser some time in your loop execution, to output the data and let the browser render the change. But because you used loops there, you can't make it async or create a delay to output the values first, before starting with the next one. But you can switch the code to self executing functions and trim down the time a bit for a smooth output in the browser before printing the next line.

And if you create such big loops, you should really take care of your code. It is not a good idea to let jQuery search the #log div in every loop again. Just do it once before the loops. And don't use an array for this simple string operations. This slows it down even more.

var log = $("#log");
var generateTestCases = 3000;

(function next(amount) {
    if( amount ) {
        var repeatIF2 = 10;
        var trackingString = amount + ";";

        (function output(count) {
            if( count ) {
                trackingString += count + ";";
                log.append('<div>' + trackingString + '</div>');

                if( --count ) {
                    // this line slows down the output
                    // change the time for faster or slower output
                    setTimeout(output, 50, count);
                } else {
                    next(--amount);
                }
            }
        })(repeatIF2);
    }
})(generateTestCases);

Working example.