如何在单击某个元素时渲染MathJax？

问题描述：

我有一个输入字段，在其中输入LaTeX命令，当我点击一个按钮时必须呈现为MathJax。我使用textContent属性将div元素的内容设置为输入字段中输入的内容。但是，浏览器不渲染MathJax并将div的内容显示为LaTeX命令。我认为这可能是因为MathJax在文档加载时呈现。点击按钮时，我可以通过哪种方式渲染MathJax？我不知道jquery或任何其他JavaScript库。有没有使用它们的方法，或者是否有必要使用它们？如何在单击某个元素时渲染MathJax？

<head> 
 
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"> 
 
    <!-- The source is used to render mathjax --> 
 
    function dispMJ() { 
 
     var a = document.getElementById("mj").value; 
 
     document.getElementById("disp").textContent = a; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <input type="text" id="mj"> 
 
    <input type="button" value="render MJ" onclick="dispMJ();"> 
 
    <div id="disp"></div> 
 

 
</body>

注：cdn.mathjax.org是接近其生命周期结束后，请查看https://www.mathjax.org/cdn-shutting-down/获取迁移提示。 –

答

你应该使用队列来告诉MathJax重新呈现在div，从未来这里看一个完整的例子http://codepen.io/damianfabian/pen/EgWEpv?editors=1000

UpdateMath = function() { 
    var TeX = document.getElementById("MathInput").value; 
    QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]); 
}

如何在单击某个元素时渲染MathJax？

相关推荐