How to print object values correctly to a DIV using innerHTML?

I'm doing a course at Codecademy and many of their beginner courses use the console.log() command to print to the console. I however would like to try using document.GetElementById() and innerHTML but it instead of printing out the details of the chosen object, it just prints "[object Object]", whereas console.log() prints the details of the key? Here is my code: <div id="myfrndDetails"></div> <script> var frnds = new Object(); frnds.bill = { firstName: "Bill", lastName: "Gates", phoneNumber: "8778787" } frnds.steve = { firstName: "Bill", lastName: "Gates", phoneNumber: "8778787" } var frndCard = function(frndName,frndLst) { for (var onefrnd in frndLst) { if (frndLst[onefrnd].firstName === frndName) { document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd]; return frndLst[onefrnd]; } } }; frndCard("Bill",frnds); </script>