Why does document.write and console.log give different outputs for getElementById?

Question

var myListItems = document.getElementById ("li");
function myList () {console.log (myListItems)};
function myWrist () {document.write (myListItems)};
myList();
myWrist();

For the JavaScript above, why does document.write output - [object HTMLLIElement] , whereas console.log outputs <li id="li">fdsf</li> ?

Any help would be appreciated..

Answer 1

The console varies depending on browser. However, most consoles will output the object and its structure if one exists whereas when using document.write it calls toString and then writes the result of that to the page.

That is why you see the object representation in the console, versus the string representation on the page.

 console.log(document.querySelector("li").toString()); 

 <li></li>