\n is not creating a new line between text in javascript

Question

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',
});

Then I want each string a, b, c displayed on a new line via:

document.getElementById("overlaycontent").innerHTML = (
    StringContent.a + '\n' +
    StringContent.b + '\n' +
    StringContent.c,
    )

All I get at the moment is everything in a single line. How do I create a new line in my text without adding more divs? I also tried \r, but that also does not help. I looked at the docs, but it keeps saying to use \n.

The generated text will have new lines, however, under most situations, white space is collapsed with HTML. This is why you are seeing the recommendation to use  . You could also generate conteint within <pre> tags which do respect the white space. — pgreen2
– pgreen2, Commented May 12, 2014 at 15:27

Samuel Caillerie · Accepted Answer · 2014-05-12 15:36:59Z

5

You should replace \n by   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,
)

edited May 12, 2014 at 15:36

answered May 12, 2014 at 15:22

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xotic750 Over a year ago

I would say can rather than should

MaxArt Over a year ago

It's not that "\n means nothing", but rather whitespaces are collapsed to a single space, unless you set the CSS white-space property to pre or other variants.

Niet the Dark Absol · Accepted Answer · 2014-05-12 15:35:36Z

2

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

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




                       SPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACE!

Newlines totally work now!
</div>

answered May 12, 2014 at 15:35

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

5 Comments

MaxArt Over a year ago

That's quite an enthusiatic endorsement of CSS.

Niet the Dark Absol Over a year ago

@MaxArt Hehe... well, it's such a useful feature... People need to know!

Xotic750 Over a year ago

This way you can even read the text back and do not have to replace   with a \n to get back to the original, bonus. :)

Niet the Dark Absol Over a year ago

And several spaces in a row works too - great if you're trying to do any kind of indent for whatever reason, and for basic ASCII art!

Xotic750 Over a year ago

Nope, let's choose the sucky way. :P

Mimouni · Accepted Answer · 2014-05-12 15:31:39Z

1

for innerHTML you need ' '

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
    )

edited May 12, 2014 at 15:31

answered May 12, 2014 at 15:25

Mimouni

3,6483 gold badges32 silver badges37 bronze badges

Comments

gtr1971 · Accepted Answer · 2014-05-12 15:43:22Z

0

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

answered May 12, 2014 at 15:43

gtr1971

2,7382 gold badges19 silver badges23 bronze badges

Collectives™ on Stack Overflow

\n is not creating a new line between text in javascript

4 Answers 4

2 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related