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!

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>

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?