使用 mathjax 进行 DOM 操作

Question

我正在尝试制作一个按钮，当至少按下一次时，由 MathJax 制作的数学符号/方程会出现在我网页上的指定位置。到目前为止，这就是我所拥有的

//in JS
//when button is pressed, then x^2 appears
document.getElementById("button").addEventListener("click", function() {
  MathJax.HTML.addElement(document.body, "div", {
    id: "sqrt"
  }, ["$$x^2$$"]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js"></script>
<!--Press button for x^2 to appear-->
<button id="button">Press</button>
<!--x^2 appears here-->
<p id="sqrt"></p>

但是每次我按下按钮时，我都没有得到 x^2，我实际上得到了一个字符串。我知道 MathJax.HTML.addElement 在事件侦听器之外时可以工作，但我尝试使用按钮来执行此操作。任何想法都会有帮助。

谢谢你

编辑：我的问题是不同的，因为它问为什么当我提交按钮时，它显示我的文字字符串 $$x^2$$ 而不是符号。我知道 MathJax 页面上的文档提到了一些相关内容，但我是一个完全的新手，不明白它。我希望有人能帮助我。

链接到显示问题的 repl.it： https://mathjax-experiement--dolphinsupreme.repl.co

编辑2：x^2符号没有显示在repl.it链接上，我不确定为什么，因为它显示在repl.it内置页面上。

Answer 1

加载 mathJax 后，您需要一个配置脚本，或通过 url 指定选项： 例如

?config=TeX-AMS-MML_HTMLorMML&dummy=.js

请参阅加载和配置 MathJax

MathJax 作为预处理器工作，并在 DOM 中需要的地方呈现数学表达式。 包含来自脚本、json 或其他内容中的变量的数学表达式的其他所有内容在附加到 DOM 后都必须进行解释（排版）才能正确呈现。 MathJax.Hub.Typeset()

在事件监听器之外，如果在 DOM 加载时立即调用

MathJax.HTML.addElement();

，它会首先将元素添加到 DOM，然后处理整个文档（或您在配置中指定的节点），这就是为什么它有效。

稍后，当您单击按钮以显示变量的数学表达式时，您必须再次调用 Typeset()：

MathJax.Hub.Typeset(".sqrt");

确实，addElement() 不会渲染你的元素：

addElement(父元素，类型[，属性[，内容]]) 创建一个 DOM 元素并将其附加到提供的父节点。它相当于

parent.appendChild(MathJax.HTML.Element(type,attributes,content))

但是，mathjax 是异步工作的，因为渲染可能需要一段时间（否则，浏览器可能会冻结直到完成），所以如果您在 mathjax 引擎仍忙于渲染页面中其他位置的内容时单击，会发生什么情况？为了避免您的调用被忘记，将您想要的排版放入 mathjax 队列中会更安全：

MathJax.Hub.Queue(["Typeset",MathJax.Hub,".sqrt"]);

如果队列为空，这将立即抛出，如果不是，它将确保您的操作将在进程结束时被抛出。 一切都暴露了这里。

旁注： 在您的代码片段中，您没有正确配置 mathjax。 您还添加了一个始终具有相同 id 的元素，这是无效的。 如果您只想替换 div 的内容，请不要使用 addElement。 否则你应该使用类并创建唯一的 id。有关详细信息，请参阅片段。

// this works as I explain above (don't forget to escape backslash in your string)
//console.log("\\"); as a reminder!
MathJax.HTML.addElement(document.body, "div", {class: "sqrt",id:"sqrt_"+length},["\\begin{equation}x+1\\over\\sqrt{1-x^2}\\end{equation}"]);
    
document.getElementById("button1").addEventListener("click", function() {
    var length = document.getElementsByClassName(".sqrt").length;
    var expression = document.getElementById("expression").value || `$$x^2$$`;
    
    MathJax.HTML.addElement(document.body, "div", {class: "sqrt",id:"sqrt_"+length},[expression]);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"#sqrt_"+length]);
});

document.getElementById("button2").addEventListener("click", function() {
  var expression = document.getElementById("expression").value || `$$x^2$$`;
  document.getElementsByClassName("sqrt")[0].innerHTML = expression;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,".sqrt"]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML&dummy=.js"></script>
<textarea id="expression"></textarea>
<!--Press button for x^2 to appear-->
<button id="button1">Add</button>
<button id="button2">Replace</button>
<!--x^2 appears here-->
<p class="sqrt">\begin{equation}
x+1\over\sqrt{1-x^2}
\end{equation}</p>

Answer 2

最后一个片段有效，但我很乐意在使用本地服务器时更好地理解它。不幸的是，粘贴此代码是不够的，并且该脚本在我的 apache2 本地服务器中不起作用。我需要帮助。谢谢。