Dual Console Logger

My version of the Stack Overflow answer here: http://stackoverflow.com/a/22867669/2499090

by Brent Rittenhouse

HTML

<h1>
    Hello, World!
</h1>
<p>
    Here is my website
</p>

CSS

#console {
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    height: 5em;
    overflow: auto;
}

JavaScript

// My version of the Stack Overflow answer here:
// http://stackoverflow.com/a/22867669/2499090

(function() {
  // Store a copy of the old console, but don't junk up the
  // global namespace with it either. This allows console
  // logging in both places.
	var oldConsole = console;
  
  // Use a pre-existing #console element or create a new one.
  var newConsole = document.getElementById("console") || (function() {
    var pre = document.createElement('pre');
    pre.setAttribute('id', 'console');
    document.body.insertBefore(pre, document.body.firstChild);
    return pre;
  })();
 
  console = {
      log: function (message) {
          var message = ['>', message, '\n'].join(' ');
          
          // Log to both consoles...
          oldConsole.log(message);
          newConsole.textContent += message;
      }
  };
})();

console.log("This is an unobtrusive version!");
console.log("Hello World!");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Make it scrollable!");