Argthtjtr

I am receiving data from the server and displaying it to the user. I originally was displaying the data using a textarea and all the formatting is correct (line breaks, tabs...etc).

html:

<textarea id="textArea" class="textArea" readonly></textarea>

js:

//data stream received from server

...

data = xhr.responseText;

$( ".textArea" ).val( data );

The above works fine, however, now I want to switch my textarea to a div instead (to add styles and be able to print the div later...), but after I switched all my formatting received from the server are gone and all the data is displayed in a whole blob when I use append:

html:

<div id="textArea" class="textArea"></div>

js:

//data stream received from server

...

data = xhr.responseText;

$(".textArea").append(data);

How can I keep the source formatting when appending data to div?

What you're really looking for is a way to make a div behave like a textarea, because a textarea renders text in a fixed-width font and remembers whitespace.

.textarea {

    border: 1px solid gray;

    font-family: monospace;

    height: 200px;

    overflow: auto;

    padding: 2px;

    resize: both;

    width: 400px;

    white-space: pre;

}

https://jsfiddle.net/AnonymousSB/hkfy14es/

Note: Unlike a textarea, you have to keep the first line of text on the same line as your opening div element to prevent a gap at the top, because white-space: pre; makes it render ALL white space.