通过JavaScript向innerHTML插入MathJax公式无法渲染如何解决？

出现该问题有两个核心原因，对应修改方案如下：

• 第一，JavaScript字符串中反斜杠为转义字符，你直接在字符串中写\frac、\sqrt等LaTeX语法时，反斜杠会被JS直接吞掉，导致最终插入页面的LaTeX源码缺少反斜杠，无法被识别。所有LaTeX语法中的反斜杠需要替换为双反斜杠，避免被JS转义。
• 第二，MathJax默认仅在页面初次加载完成时自动渲染一次已存在的内容，你后续通过JS动态插入的公式内容，MathJax不会自动触发渲染，需要手动调用渲染接口。

修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Tools for Operation Research</title>
<script type="text/javascript" src="D:/_Installers/MathJax-2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
    <section id="main_content">
        Put text here:
    </section>
    <script>
        document.getElementById("main_content").innerHTML = "The expresion is: <br> $$\\displaystyle Q^*=\\sqrt{\\left( \\frac{2DA}{h}\\right)\\left(\\frac{1}{1-\\frac{D}{\\psi}}\\right)\\left(\\frac{h+\\pi}{\\pi}\\right)}$$";
        // 手动触发MathJax渲染指定容器的内容
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "main_content"]);
    </script>
</body>

修改完成后刷新页面即可正常渲染公式。

内容的提问来源于stack exchange，提问作者Andrey Vinajera