使用 MathML 在 Web 上显示数学表达式，动态添加的 DOM 片段也表示为数学表达式。

因为我真的想在我正在开发的应用程序中显示平方根和其他数学公式，所以我使用了一个名为 MathML 的 Javascript 库。

↓ 首先，加载 MathJax JavaScript 库

quiz.html.erb

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>

↓既然应该用HTML写的“Route 3”在MathJax中是这样写的...

<math><msqrt><mi>3</mi></msqrt></math>

↓如果你这样用 HTML 写...

quiz.html.erb

<div class='answer' id='answer-1'>
    <h3 class='n'></h3>
    <p><math><msqrt><mi>3</mi></msqrt></math></p>
</div>

嗯，似乎从一开始就在 HTML 中静态乱写的代码片段被正确转换为公式。
MathMLを使って数式をWebに表示して、さらに動的に追加されたDOMのスニペットも数式表示化

但是，如果您使用 JavaScript 从此处添加下一个问题或答案选项，则会显示实心的<math><msqrt><mi>3</mi></msqrt></math>，或者根部分将消失，它只会是“3”。
↓ 我想显示 Route 3...
MathMLを使って数式をWebに表示して、さらに動的に追加されたDOMのスニペットも数式表示化

这次是问答游戏，你可以选择 4 或 8 个选项的问题的答案，因此稍后将动态替换的问答片段必须用数学公式巧妙地表达出来。

这大概和jQuery常见的问题类似，动态添加的DOM没有事件处理函数，原因是后面添加到HTML中的MathML片段没有渲染聋。我只能这么认为。
所以当我搜索 MathML 文档时，有一个函数可以正确地重新渲染，所以我想在这个时候重新渲染

测验.js

MathJax.texReset();
MathJax.typeset();

它渲染了所有的 DOM 没有任何问题。

↓ 耶！
MathMLを使って数式をWebに表示して、さらに動的に追加されたDOMのスニペットも数式表示化

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308633016.html