更新 <pre> 标记的内容时如何尊重新行？

Question

在看到this answer 之后，我试图找到一种方法来更新<pre> 标记的内容，并使用隐式换行符（即在字符串文字中）显示换行符。我尝试设置各种属性：innerHTML、innerText、textContent、nodeValue（检查this question 的答案后）但似乎没有一个保留空白。

我知道我可以使用 String.fromCharCode() - 例如"Bob " + String.fromCharCode(10, 13) + "is "... 但也想找到一种使用前一种语法的方法。

//Perfectly valid code
var foo = "Bob \
is \
cool.";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});

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

有没有办法根据需要更新内容？

Answer 1

您似乎误解了您所链接的答案。答案是：

如果您希望有一个跨越多行的字符串，您可以在终止该行之前插入一个反斜杠字符“\”，如下所示：

//Perfectly valid code
var foo = "Bob \
is \
cool.";

但是，该字符串将不在字符串被分成不同行的位置包含\n 字符。在字符串中插入换行符的唯一方法是插入一个值为 10 的字符，最简单的方法是 \n 转义字符。

var foo = "Bob\nis\ncool.";

所以你应该这样做：

//Perfectly valid code
var foo = "Bob\nis\ncool.";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});

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

如果您希望 both 将字符串分成多行 并且 在字符串中包含换行符，则两者都需要：

//Perfectly valid code
var foo = "Bob\n\
is\n\
cool.";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});

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

Answer 2

另一种方法是使用template literals。

// template literal syntax
var foo = `Bob 
is 
cool.`;
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});

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