//DIV tag wont work" data-image="https://teknosrc.com/wp-content/uploads/2014/10/Pretty-Style-Indent-JSON-String-in-HTML-DIVPRE-Tag-in-Javascriptj-Query-250x250.png" data-button="none">

         We come across many situations where we need to display JSON string (pretty/Style/Indent format) inside HTML DIV(<div></div>) tag. The below Javascript code snippet can be used to achieve what you need.

 HTML Code

<pre id="json"></pre>
//DIV tag wont work

 Javascript Code

var data = {
     "data": {
          "attribute1": "value1",
          "attribute2": "value2",
     },
     "attribute3": "value3"
};
document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
OR
$("#json").html(JSON.stringify(data, undefined, 2)); // For jQuery

Output

{
  "data": {
    "attribute1": "value1",
    "attribute2": "value2"
  },
  "attribute3": "value3"
}

          If you want to indent more, increase the value 2 in function JSON.stringify().

//DIV tag wont work" data-image="https://teknosrc.com/wp-content/uploads/2014/10/Pretty-Style-Indent-JSON-String-in-HTML-DIVPRE-Tag-in-Javascriptj-Query-250x250.png" data-button="none">