我有以下代码使用 Mustache 模板显示网页（为清楚起见进行了简化）
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js"</script>
<link rel="stylesheet" href="/static/css/pico.min.css">
</head>
<body>
<main class="container">
<button type="submit"
id="submitBtn"
onclick= "foo();">
Foo
</button>
<script>
function foo() {
var newHTML = Mustache.render("{{food}}", { food: "tacos" });
console.log("newHTML:", newHTML)
}
</script>
</main>
</body>
</html>
我希望 newHTML 的值是“tacos”，但它是一个空字符串。我怀疑这与页面本身最初是使用 Chevron 从 Python 呈现的事实有关（我无法解决这个问题，它是更大代码库的一部分）。我尝试在独立的 HTML 文件中制作相同的页面，并且 newHTML 的值确实设置为“tacos”
<!doctype html>
<html>
<head>
<title>Mustache Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js"</script>
</head>
<body>
<h1 id="heading">{{food}}</h1>
<script>
var newHTML = Mustache.render("{{food}}", { food: "tacos" });
console.log(newHTML)
document.querySelector('#heading').innerHTML = newHTML
</script>
</body>
</html>
求助！刚刚花了我半天的时间在 ChatGPT 上转圈
我试过使用不同版本的 Mustache.js，使用 try/catch 块，简化我的代码，控制台记录所有变量，但问题仍然存在。