Question

I have a code on the client side that receives some data through socket.io with a node.js backend. I receive some indented data (which is some code in string format). I can alert the code out and I see it is indented in the alert, but when I do document.getElementById('myDiv').innerHTML = receivedData.indentedData the data outputted in myDiv is not indented, but just in a single line.

Do you know a way to have the indentation respected in some string when filling an HTML element?

To be more precise I alert the data in this form:

class Motto {
  public static void main(String[] args) {
    System.out.println("Java rules!");
  }
}

But what I see in myDiv is this:

class Motto { public static void main(String[] args) { System.out.println("Java rules!"); } }

Thanks

Answer 1

Most of the time, outputting code like this, you’ll want to wrap it in <pre> and <code> tags.

document.getElementById('myDiv').innerHTML = "<pre><code>"+receivedData.indentedData+"</code></pre>";

That’s what the StackOverflow markdown editor does for code snippets.