如何通过JavaScript动态插入MathJax(LaTeX)公式？innerHTML注入失效解决

问题根源 #

你代码里的JavaScript字符串会自动解析转义字符——比如\b会被当成退格符，\\会被转成单个\，导致最终注入到DOM里的LaTeX代码缺失必要的反斜杠，MathJax无法识别正确的公式结构。

解决方案 #

方案1：使用模板字符串（推荐） #

模板字符串（用反引号`包裹）不会自动解析普通反斜杠，能完整保留LaTeX代码的原始格式：

document.getElementById("si_suvat_equation").innerHTML = 
`<span>\\begin{gather} s = ut + \\frac{1}{2}  at^{2}\\\\ \\notag \\end{gather}</span>`;
// 注：LaTeX本身需要用\\表示换行，所以模板字符串里仍需保留双反斜杠

方案2：转义所有反斜杠 #

如果使用普通双引号/单引号字符串，需要把LaTeX里的每个\都写成\\，确保JavaScript能把正确的字符传递给DOM：

document.getElementById("si_suvat_equation").innerHTML = 
"<span>\\\\begin{gather} s = ut + \\\\frac{1}{2}  at^{2}\\\\\\\\ \\\\notag \\\\end{gather}</span>";

方案3：触发MathJax重新渲染 #

MathJax默认只在页面加载时渲染一次，动态注入的内容需要手动触发重新解析。在注入代码后添加对应版本的渲染命令：

// MathJax 3.x 版本
MathJax.typesetPromise([document.getElementById("si_suvat_equation")]);

// MathJax 2.x 版本
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "si_suvat_equation"]);

完整示例（MathJax 3.x） #

// 注入公式内容
document.getElementById("si_suvat_equation").innerHTML = 
`<span>\\begin{gather} s = ut + \\frac{1}{2}  at^{2}\\\\ \\notag \\end{gather}</span>`;
// 触发重新渲染
MathJax.typesetPromise([document.getElementById("si_suvat_equation")]);

内容的提问来源于stack exchange，提问作者Paul Davis