スタックオーバーフローで「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で操作した方がわかりやすいのかもしれません。