How to show objects inside html elements like console?

Question

I wanna show the whole object inside a paragraph called "demo", and i want the object to be shown similar to the way that it will be in the console. But instead of that it returns "[object object]" inside the paragraph. Is there a way to show it like console.log method inside the paragraph?.
Here is my code :

var obj = {
  subobj: {prop1: "value1", prop2: "value2", prop3: "value3"},
};

var var1 = "subobj";

function func() {
  for (x in obj) {
    if (var1 == x) {
      // i want it to be shown like the console.log method
      // console.log(obj[x])
      document.getElementById("demo").innerHTML = obj[x];
    }
  }
};

func()

Answer 1

You can just stringify the whole object rather than looping through each key/value pair and put the result in a pre element:

function func(obj) {

  // null refers to an optional replacer function which we won't
  // use in this instance. 2 is an optional parameter to set the 
  // indentation, in this case 2 spaces
  var json = JSON.stringify(obj, null, 2);
  document.getElementById("demo").innerHTML = json;
};

OUTPUT

{
  "subobj": {
    "prop1": "value1",
    "prop2": "value2",
    "prop3": "value3"
  }
}

DEMO