title: How to show objects inside html elements like console?
body: <p>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?.<br />
  Here is my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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()</code></pre>
  </div>
  </div>
  </p>