mhofman/html-console.js

## html-console.js
(function (global) {
    var output = null;
    var buffer = [];
    var target;

    function log(msg) {
        if (!output) {
            buffer.push(msg);
            return;
        }

        var pre = document.createElement('pre');
        pre.textContent = msg;
        output.appendChild(pre);
    }

    if (global.htmlConsole) {
        target = global.htmlConsole.target;
    }
    if (!target) {
        target = "#console";
    } else if (typeof target.appendChild == 'function') {
        output = target;
    }

    if (!output) document.addEventListener("DOMContentLoaded", function(){
        output = document.querySelector(target);
        if (!output) throw new Error('No element found for console using query "' + target + '".')
        buffer.map(log);
        buffer.length = 0;
    });

    global.htmlConsole = global.htmlConsole || {};
    global.htmlConsole.log = log;
}(this));

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple HTML Console example</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script src="./html-console.js"></script>
    <script>
      htmlConsole.log('Hello from page');

      setTimeout(() => htmlConsole.log('Delayed message'), 1000);
    </script>
  </head>
  <body>
    <div id="console"></div>
  </body>
</html>
	(function (global) {
	var output = null;
	var buffer = [];
	var target;

	function log(msg) {
	if (!output) {
	buffer.push(msg);
	return;
	}

	var pre = document.createElement('pre');
	pre.textContent = msg;
	output.appendChild(pre);
	}

	if (global.htmlConsole) {
	target = global.htmlConsole.target;
	}
	if (!target) {
	target = "#console";
	} else if (typeof target.appendChild == 'function') {
	output = target;
	}

	if (!output) document.addEventListener("DOMContentLoaded", function(){
	output = document.querySelector(target);
	if (!output) throw new Error('No element found for console using query "' + target + '".')
	buffer.map(log);
	buffer.length = 0;
	});

	global.htmlConsole = global.htmlConsole \|\| {};
	global.htmlConsole.log = log;
	}(this));
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Simple HTML Console example</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<script src="./html-console.js"></script>
	<script>
	htmlConsole.log('Hello from page');

	setTimeout(() => htmlConsole.log('Delayed message'), 1000);
	</script>
	</head>
	<body>
	<div id="console"></div>
	</body>
	</html>