　スタックオーバーフローで「console.logの出力結果をブラウザ上で表示したい」という質問に対して回答した内容をまとめたものです。
　console.logに対して、DOM操作でHTML上の要素を操作す関数式を代入することによって実現しました。サンプルコードは以下のものです。以下のコードはブラウザ上に1～100の数値を改行して出力します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script>
        // ページ読み込み時のイベントを登録
        window.onload = function () {
            // ブラウザ上に表示する文字列を保持する一時変数
            let outstr = "";
            // console.logの挙動
            console.log = (...args) => {
                for (let arg of args) {
                    // console.logに入力された文字列を改行つきで保持
                    outstr = outstr + arg + "<br>";
                }
                // HTMLのid="console"に対して文字列outstrを設定する
                document.getElementById("console").innerHTML = outstr;
            }

            // 1～100までを出力するコード
            for (let i = 1; i < 100; i++) {
                console.log(i);
            }
        }
    </script>
</head>

<body>
    <!-- ブラウザ上の出力先 -->
    <p id="console"/>
</body>

</html>

　document.getElementById("console").innerHTML=outstrでHTMLのidがconsoleの要素へ設定してます。
　処理が完了してからブラウザに反映されるようなので1～100までを出力するコードを以下のような処理が完了しないコードに書き換えると動作しません。

            // 1からの値を出力するコード
            for (let i = 1;; i++) {
                console.log(i);
            }

　console.logを介さず直接document.getElementById("console").innerHTMLで文字列を設定した方が早いかもしれません。しかし、初心者にとっては1～100までを出力するコード部分を書き換えてconsole.logで操作した方がわかりやすいのかもしれません。