函数设置innerHTML后MathJax无法渲染的原因及解决方法

• MathJax默认仅在页面首次加载完成后，自动扫描并渲染一次页面中已存在的TeX/LaTeX格式内容。
• 第二段代码里，$$hello$$是点击按钮后才动态插入到DOM中的，此时MathJax的初始渲染流程已经执行完毕，它不会主动监听DOM内容的变化并重新渲染，因此只会显示原始的$$hello$$文本，无法解析为MathJax格式。

在动态插入内容后，手动调用MathJax提供的渲染API，触发对新内容的解析渲染。可以选择全页面渲染，或者更精准地针对目标元素渲染：

方法1：全页面重新渲染 #

修改后的代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>
<button onclick="start()">Click</button>
<p id="text"></p>

</body>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
function start(){
    document.getElementById("text").innerHTML="$$hello$$";
    // 手动触发MathJax全页面渲染
    MathJax.typeset();
}
</script>
</html>

方法2：仅渲染目标元素（更高效） #

如果只需要处理新增内容的元素，可以指定DOM节点进行渲染，避免全页面扫描：

function start(){
    const textEl = document.getElementById("text");
    textEl.innerHTML="$$hello$$";
    // 仅渲染指定元素
    MathJax.typeset([textEl]);
}

内容的提问来源于stack exchange，提问作者M.Riyan