如何在 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> 标签。

The HTML Preformatted Text () represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.

Answer 2

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

这允许您将 div 像 pre 或 code 标签一样工作。

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

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

How to append multi line template string in div?

javascript

string

template-strings