Solution 1 :

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>

Suggested articles to read:

  1. Element.innerHTML
  2. <br>: The Line Break element

I hope that helps!

Solution 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>

Problem :

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:





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


Comment posted by Taplar

The issue with your attempt was the usage of

Comment posted by Scott Marcus

var finalResult=results.join(“

Comment posted by Don’t use self-terminating tags.

Don’t use self-terminating tags.