Set text with line breaks to HTML from Javascript

Question

I have a string that has line breaks at the end of each line like the one I have below:

This is from a string variable which I want to set to a paragraph tag in HTML. I tried using the innerHTML method but it only printed my results without the line breaks.

Any idea on how I can accomplish this task?

CertainPerformance · Accepted Answer · 2018-10-06 07:39:28Z

1

You could replace all the newlines with <br>s:

const str = `1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678
1234567
123456
12345
1234
123
12
1`;
document.querySelector('p').innerHTML = str.replace(/\n/g, '<br>');

<p></p>

answered Oct 6, 2018 at 7:39

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Comments

AuxTaco · Accepted Answer · 2018-10-06 07:57:15Z

1

You can set the paragraph's white-space CSS property to pre, pre-wrap, or pre-line. All will preserve line breaks.

document.querySelector('p').innerHTML = `1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678
1234567
123456
12345
1234
123
12
1`;

p {
  white-space: pre;
}

<p></p>

answered Oct 6, 2018 at 7:57

AuxTaco

5,2011 gold badge16 silver badges28 bronze badges

Collectives™ on Stack Overflow

Set text with line breaks to HTML from Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related