数式をJavascriptから読み込んでHTML上に表示させたい(MathML+MathJax)

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

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

function displayText()
{
    var str = "<math>";
    str += "<mi>i</mi>";
    str += "</math>";

    var elem = document.getElementById("test");
    elem.innerHTML = str;
}

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

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

すると、本来、以下のようにカッコいい数式用の「i」の文字が表示されるはずなのに

実際には以下のような普通の「i」しか表示されません。

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