如何在连接数组中的字符串并将其呈现在 div 中后创建换行符？

Question

我有以下数组：

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

我使用 .join 方法加入它，如下所示：

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

我有一个 div:

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

然后我尝试像这样在 div 中渲染它：

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

这只是在每个单词之间用 space 呈现：

Dog Cat Fish Parrot

我希望它像这样将每个字符串粘贴到一个新行中：

狗

猫

鱼

鹦鹉

我好像做不到。关于如何实现这一目标的任何建议？

Answer 1

使用 <br> 而不是 \n 将解决您的问题。

或许您可以尝试以下方法：

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

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

建议阅读的文章：

希望对您有所帮助！

Answer 2

@norbitrial 的回答很好，解决了问题。我希望它被接受为正确的解决方案，因为它是。

下面的解决方案是一个替代方案，它允许使用 \n 作为换行符，以及 textContent 属性。诀窍是使用 <pre> 元素。

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

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

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