为什么 document.write 不能处理带有 HTML 标签的变量？

Question

document.write 在变量上工作正常。 document.write 在带有 HTML 标签的字符串上也可以正常工作。但是，当尝试在带有 HTML 标签的 JS 变量上使用 document.write 时，程序无法运行。

这是我的代码：

var Foo = "Foo Variable"
document.write(Foo)
document.write("<h1>Foo</h1>");
document.write(<h1>Foo</h1>)

前三行工作正常，但最后一行不显示任何内容。我相信这是一个语法错误，但无论我尝试什么，它似乎仍然不起作用。我试过只将 HTML 标签放在引号中但无济于事。有什么办法可以让一个字符串变量表示为 header？换句话说，我希望页面将单词 "Foo Variable" 显示为 h1 header.

提前致谢。

Answer 1

是的，这是语法错误。如果要在h1标签内输出Foo变量的内容，需要使用模板字面量（ES2015+）或者字符串拼接：

// Template literal (ES2015+)
var Foo = "Foo Variable";
document.write(`<h1>${Foo}</h1>`);

或

// String concatenation
var Foo = "Foo Variable";
document.write("<h1>" + Foo + "</h1>");

但是，在现代网络编程中几乎没有document.write的位置。相反，使用 the DOM 添加或更新元素。

Why doesn't document.write work on a variable with HTML tags?