How to create linebreaks after joining strings from an array and rendering it inside a div?

Question

I have the following array:

results = ["Dog","Cat","Fish","Parrot"];

I join it using the .join method like so:

var finalResult=results.join("\n");

I have a div:

Validation Result:<div id="result"></div>

I then try to render it inside a div like so:

this.shadowRoot.getElementById('result').textContent = finalResult;

This just ends up being rendered with a space between each word:

Dog Cat Fish Parrot

I want it to paste each string on a new line like so:

Dog

Cat

Fish

Parrot

I can't seem to be able to achieve this. Any suggestions on how I can achieve this?

The issue with your attempt was the usage of textContent instead of innerHTML. textContent is, as it suggest, going to be interpreted as just text — Taplar
– Taplar, Commented Jan 7, 2020 at 22:30

norbitrial · Accepted Answer · 2020-01-07 22:35:14Z

6

Using <br> instead of \n will solve your issue.

Maybe you can try as the following:

const results = ["Dog","Cat","Fish","Parrot"];
const div = document.getElementById('elements');
div.innerHTML = results.join('<br>');

<div id="elements"></div>

1 Comment

Scott Marcus Over a year ago

Don't use self-terminating tags.

Brett DeWoody · Accepted Answer · 2020-01-07 22:41:44Z

2

The answer from @norbitrial is great and solves the issue. I'm hoping it's accepted as the correct solution, because it is.

The solution below is an alternative, which allows the use of the \n as a line break, and textContent property. The trick is to use a <pre> element.

results = ["Dog", "Cat", "Fish", "Parrot"];
const finalResult = results.join("\n");
document.getElementById('result').textContent = finalResult;

<pre id="result"></pre>

edited Jan 7, 2020 at 22:41

answered Jan 7, 2020 at 22:35

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Collectives™ on Stack Overflow

How to create linebreaks after joining strings from an array and rendering it inside a div?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related