\n Is Not Creating A New Line Between Text In Javascript

I have a piece of JavaScript that is supposed to update a in my HTML: var StringContent = ({ 'a': 'Some String a', 'b': 'Some string b', 'c': 'Some string c', }); The

Solution 1:

You should replace \n by <br> since innerHTML takes an HTML string (in HTML, \n merges with adjacent spaces but does not produce a carriage return except for elements with the style white-space:pre-wrap as noted by MaxArt) :

document.getElementById("overlaycontent").innerHTML = (
    StringContent.a + '<br>' +
    StringContent.b + '<br>' +
    StringContent.c,
)

Solution 2:

CSS! white-space! pre-wrap! Learn about it!

<div style="white-space: pre-wrap">




                       SPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACE!

Newlines totally work now!
</div>

Solution 3:

for innerHTML you need '<br />'

document.getElementById("overlaycontent").innerHTML = (
    StringContent.a + '<br />' +
    StringContent.b + '<br />' +
    StringContent.c
    )

but for an alert you can use : String.fromCharCode(10) instead of '\n'

alert(
    StringContent.a + String.fromCharCode(10) +
    StringContent.b + String.fromCharCode(10) +
    StringContent.c
    )

Solution 4:

\n (or sometimes \r\n) will work when outputting to a text element such as <textarea> or to a .txt document, but <br> is required for HTML.