如何在单独的行上打印数组的每个元素？答案

【问题标题】：How to print each element of an array on a separate line?如何在单独的行上打印数组的每个元素？
【发布时间】：2020-06-17 10:57:09
【问题描述】：

我是 JavaScript 新手，我正在尝试为科学 PDF 构建客户端参考提取器。我希望每个参考都在单独的行上。我试过'\n' 和'<br>'，它们不起作用。这是一个例子：

references = ["1", "2", "3"];
document.getElementById("output").textContent = references.join('<br>');

<div id="output">
  <div>Extracting...</div>
</div>

我的输出是

1
2
3

【问题讨论】：

标签： javascript arrays newline

【解决方案1】：

您应该使用innerHTML 而不是textContent 和<br />。
使用textContent，“值未解析为 HTML”；见Differences from innerHTML。

references = ["1", "2", "3"];
document.getElementById("output").innerHTML = references.join('<br>');

<div id="output">
  <div>Extracting...</div>
</div>

您也可以使用innerText，但您必须使用\n 行分隔符而不是<br />

references = ["1", "2", "3"];
document.getElementById("output").innerText = references.join('\n');

<div id="output">
  <div>Extracting...</div>
</div>

【讨论】：

【解决方案2】：

您可以像这样使用 map 遍历数组中的每个元素：

references = ["1", "2", "3"];
references.map((reference) => {
  const node = document.createElement('p');
  const textnode = document.createTextNode(reference);
  node.append(textnode);
  document.getElementById("output").appendChild(node);
})

<div id="output">
  <div>Extracting...</div>
</div>

【讨论】：

【解决方案3】：

如果您希望 'references' 中的每个项目都是它自己的 HTML 元素，您可以尝试遍历数组，创建一个新元素，并将其附加到 DOM。

for( const ref of references){
        let newEl = document.createElement('div');
        newEl.innerHTML = ref;
        document.body.appendChild(newEl);
  }

【讨论】：

请考虑document.body.appendChild(newEl)。请参阅：couldn't append a child node to the document。