48547


MathMLという、数式をWEB上で表示するマークアップ言語を  
Javascriptから呼び出してHTML上で使用したいのですが、うまく行きません。

Javascript側で以下のような関数を作って

[code]

    function displayText()
    {
        var str = "<math>";
        str += "<mi>i</mi>";
        str += "</math>";
    
        var elem = document.getElementById("test");
        elem.innerHTML = str;
    }
    
[/code]

HTML側でボタンを押して以下のように呼び出しをします。

[code]

    <div id="test"></div>
    <input type="button" value="MathML" onclick="displayText()">
    
[/code]

すると、本来、以下のようにカッコいい数式用の「i」の文字が表示されるはずなのに  
[![画像の説明をここに入力](https://i.stack.imgur.com/6sGp9.png)](https://i.stack.imgur.com/6sGp9.png)

実際には以下のような普通の「i」しか表示されません。  
[![画像の説明をここに入力](https://i.stack.imgur.com/HlMTC.png)](https://i.stack.imgur.com/HlMTC.png)

Javascriptを使用した時のみこの問題が起きていて  
普通にMathML+MathJaxを使ってもこの問題は起きません。  
何か私のJavascriptやHTMLの使い方がおかしいのでしょうか？

以下にサンプルのHTMLファイルをアップロードしました。

・こちらがJavascriptを使った場合のサンプルです。  
ボタンを押すと、普通の「i」のみ表示されます。  
<https://github.com/pekochun/test/blob/master/JavascriptWithMathML.html>

・こちらがJavascriptを使わずにMathMLを直に書いた場合のサンプルです。  
ボタンを押す前から、カッコいい「i」が表示されます。  
<https://github.com/pekochun/test/blob/master/NoJavascriptMathML.html>


CC BY-SA 4.0
2018-09-19T07:40:27.703
48544
2018-09-19T10:35:19.630
2018-09-19T10:35:19.630
22541
22541
question
javascript html html5
数式をJavascriptから読み込んでHTML上に表示させたい(MathML+MathJax)


MathJaxを動的に使うには

[code]

    MathJax.Hub.Typeset()
    
[/code]

を利用する必要があります。  
書き換えはなかなか重いのでターゲット要素を指定して実行したりしましょう。  
<https://docs.mathjax.org/en/v1.0/typeset.html>


CC BY-SA 4.0
2018-09-19T07:56:45.763
48546
2018-09-19T07:56:45.763
22665
48544
answer


MathJaxのスクリプトは、ページを読み込んだ際にページのHTML中のMathML要素をかっこいい表示に変換します。  
ということは、JavaScriptで後からページにMathML要素を追加してもMathJaxによる処理が行われません。  
これが、ご提示のサンプルでかっこいい数式が表示されない理由です。

後から追加したMathML要素をMathJaxに処理してもらうには、[MathJax.Hub.Typeset](http://docs.mathjax.org/en/latest/api/hub.html#Typeset)を用いるとよいようです。  
具体的には以下のようにすると求める動作になりました。

[code]

    <html>
    <head>
      <script async="" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
      <script type="text/javascript">
      function displayText()
      {
        var str = "<math>";
        str += "<mi>i</mi>";
        str += "</math>";
    
        var elem = document.getElementById("test");
        elem.innerHTML = str;
    
        // elemの中身をMathJaxに処理してもらう
        MathJax.Hub.Typeset(elem);
      }
      </script> 
    </head>
    <body>
      <div id="test"></div>
      <input type="button" value="MathML" onclick="displayText()">
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-09-19T07:59:27.703
48547
2018-09-19T07:59:27.703
30079
48544
answer