用 JS 设置元素文本忽略 \\n 换行符？

Question

我想通过 JS 设置段落元素的文本。该字符串包含换行符(\n)，但它们是在段落中不可见.

这是期望的结果:

<p>
  Lorem ipsum dolor sit amet,<br> 
  consetetur sadipscing elitr,<br> 
  sed diam nonumy <br> eirmod tempor...
</p>

这就是我的样子通过JS设置文本:

document.getElementById("text").textContent = 
"Lorem ipsum dolor sit amet,\n" + 
"consetetur sadipscing elitr,\n" + 
"sed diam nonumy \n eirmod tempor...";

<p id="text"></p>

我怎样才能用JS实现第一个例子的行为？

Answer 1

来自 HTMLElement.innerText 的 MDN 文档：

注意：innerText很容易与Node.textContent混淆，但两者之间有重要区别。基本上，innerText 知道文本的渲染外观，而 textContent 则不知道。

因此，如果您改用 innerText，您将获得预期的结果：

document.getElementById("text").innerText = 
"Lorem ipsum dolor sit amet,
" + 
"consetetur sadipscing elitr,
" + 
"sed diam nonumy 
 eirmod tempor...";

<p id="text"></p>

不要总是联系innerText：textContent 性能更高......但在某些情况下，innerText 是正确的工具。