如何在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  

Answer 1

如果您希望按原样格式化文字，请使用<pre>标记。

  

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

Answer 2

您还可以使用名为white-space的CSS属性。

这样，您就可以让div像pre或code标记一样工作。

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