Why does console.log(document.getElementById( 'blah' ))) give different log messages in Chrome?

Question

I am just messing around and am logging out a div that I have selected with standard javascript but that I have executed inside a jQuery document.ready(fn) block.

$(document).ready(function(){
  console.log(document.getElementById( 'blah' ));
})

I'm really interested to know why sometimes I get...

<div id="blah"></div>

And other times I get...

Seems to log differently randomly.

Answer 1

This does appear to be random, at least in Chrome. If you want to force it one way or another in the Chrome console you can use console.dir and console.dirxml.

• console.dirxml will force the output to be like your first example, in xml format
• console.dir will output like your second example, in object notation.

More examples of console commands in Chrome: https://developer.chrome.com/devtools/docs/console-api

Edit: dirxml also works in Internet Explorer 11 and later but not in Firefox though this shouldn't be an issue as Firefox outputs elements in xml format.