JSON in HTML with line breaks

Issue

I have some Javascript on my page that makes an ajax call which returns some JSON data.

With the result I do this:

results = JSON.stringify(data, undefined, 2);
console.log(results);
$('.box').append(results);

.box is just an empty div.

console.log(results) gives me an indented result with linebreaks but the data in .box is just all in one line.

How can I make sure that the result in .box is also on multiple lines and indented?

Solution

.box is just an empty div.

Make it an empty <pre> instead:

<pre class="box"></pre>

Answered By - Darin Dimitrov