Javascript 如何在div中追加多行模板字符串？

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

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>

我期望的输出是：

for i in range(10):
        print i 

for i in range(10):print i

我的输出是：

for i in range(10):
        print i 

for i in range(10):print i

请给我建议一些方法，使我在适当的间距和线所需的。 我尝试了

（temp.split（'\n'））.join（'
）

它在单独的行中打印

temp

，但不能确保正确的间距。像这样：

for i in range(10):
print i  

---

如果要按原样格式化文本，请使用标记

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

---

还可以使用名为的CSS属性

这允许您将

div

像

pre

或

code

标记一样工作

在要格式化的代码周围使用-tag