javascript - 如何在 div 中附加多行模板字符串？

Question

我有一个模板字符串如下：

var temp = `
for i in range(10):
    print i`

我期望的是这个模板代码应该出现在 div 之间。
我在 index.html 中的 div 是：

<div id = "code" style="height:500px;top:0;border: 1px solid black;"></div>

我触发追加的javascript代码是：

$('#code').append(temp);

我想要的输出是：

for i in range(10):
        print i

我的输出是：

for i in range(10):print i

请建议我一些方法来获得我想要的适当间距和线条。我试过(temp.split('\n')).join('<br>')它以单独的行打印，temp但不能确保适当的间距。像这样：

for i in range(10):
print i

score 3 · Accepted Answer

如果要按原样格式化文本，请使用<pre>标签。

HTML Preformatted Text() 表示预格式化文本。此元素中的文本通常以不成比例的字体显示，与文件中的布局完全相同。此元素内的空格显示为已键入。

score 1 · Accepted Answer

您也可以使用名为white-space.

这允许你把你div的工作像一个pre或code标签。

#code {
  white-space: pre-wrap;
}

2 回答 2