更新内容时如何尊重换行 <pre> 标签？

Question

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

我知道我可以使用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> 

如果您既想将字符串分成多行，又要在字符串中包含换行符，则需要两者：

 //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 literal syntax var foo = `Bob is cool.`; document.addEventListener('DOMContentLoaded', function() { document.getElementById('pre').textContent = foo; }); 

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