I want to show console log in html div. I am able to do that with below code.

var log = document.getElementById("logger")
 console.log = (function (method, log) {
        return function (text) {
            method(text);
            let msg = document.createElement('div');
            msg.textContent = text;
            log.appendChild(msg);
        };
 })(console.log.bind(console), log);

But console.log in functions does show in html div unless whole function execution is complete?

How can I show console logs in html div as function is executing (without waiting for function to complete its execution)?

In below example, I see logs in div after for loop execution gets complete.

function testfunction(){
    console.log('test function');
    for(let i=0; i<100000; i++){
        console.log(i);
    }
} 

I see updated logs in div in Inspect-> Elements and not on browser page.