显示mathml格式

我想自制一个公式编辑器,但是我运行下面代码,点击数字按钮后显示的数字不是mathml格式,我想要mathml的格式,请问应该怎么做?


<!DOCTYPE html>
<html>
    <head>
        <script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
        <style type='text/css'>
            button {
                width: 60px;
                height: 60px;
                font-size: 30px;
            }
            .headbtn {
                background: #cccccc
            }
        </style>
    </head>

    <body>
            
        <table border='1'>
            <tr>
                <td colspan='6' align='left'>
                    <div id='thescreen' style='overflow-x: auto;width:1px;height:90px;text-align:left;'>        
                    </div>
                </td>
            </tr>
            <tr id='thehead'>
                <td id='AC'><button style='background: grey' onclick='A_C()' title='清除'>AC</button></td>
                <td><button class='headbtn' onclick='backSpace()' title='退格'></button></td>
                <td><button class='headbtn'></button></td>
                <td><button class='headbtn'></button></td>
                <td><button class='headbtn'></button></td>
                <td><button class='headbtn'></button></td>
            </tr>
            <tr>
                <td><button>%</button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button style='font-size: 15px'><svg xmlns='http://www.w3.org/2000/svg' width='2.718ex' height='5.285ex' viewBox='0 -1426 1201.4 2336' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style=''><defs></defs><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='matrix(1 0 0 -1 0 0)'><g data-mml-node='math'><g data-mml-node='mfrac'><g data-mml-node='TeXAtom' data-mjx-texclass='ORD' transform='translate(220, 676)'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'></text></g></g><g data-mml-node='TeXAtom' data-mjx-texclass='ORD' transform='translate(220, -710)'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'></text></g></g><rect width='961.4' height='60' x='120' y='220'></rect></g></g></g></svg></button></td>
                <td><button>|⬚|</button></td>
                <td><button>(⬚)</button></td>
            </tr>
            <tr>
                <td><button>⬚²</button></td>
                <td><button style='font-size: 25px'><sup></sup></button></td>
                <td><button style='font-size: 15px'><svg xmlns='http://www.w3.org/2000/svg' width='4.03ex' height='2.851ex' viewBox='0 -1050.3 1781.4 1260' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style=''><defs><path id='MJX-10-TEX-SO-221A' d='M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z'></path></defs><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='matrix(1 0 0 -1 0 0)'><g data-mml-node='math'><g data-mml-node='msqrt'><g transform='translate(1020, 0)'><g data-mml-node='TeXAtom' data-mjx-texclass='ORD'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'></text></g></g></g><g data-mml-node='mo' transform='translate(0, 140.3)'><use xlink:href='#MJX-10-TEX-SO-221A'></use></g><rect width='761.4' height='60' x='1020' y='930.3'></rect></g></g></g></svg></button></td>
                <td><button style='font-size: 15px'><svg xmlns='http://www.w3.org/2000/svg' width='4.03ex' height='2.851ex' viewBox='0 -1050.3 1781.4 1260' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style=''><defs><path id='MJX-30-TEX-SO-221A' d='M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z'></path></defs><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='matrix(1 0 0 -1 0 0)'><g data-mml-node='math'><g data-mml-node='mroot'><g><g data-mml-node='TeXAtom' data-mjx-texclass='ORD' transform='translate(1020, 0)'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'></text></g></g></g><g data-mml-node='TeXAtom' transform='translate(231.3, 550.3) scale(0.5)' data-mjx-texclass='ORD'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'></text></g></g><g data-mml-node='mo' transform='translate(0, 140.3)'><use xlink:href='#MJX-30-TEX-SO-221A'></use></g><rect width='761.4' height='60' x='1020' y='930.3'></rect></g></g></g></svg></button></td>
                <td><button style='font-size: 25px'>⌊⬚⌋</button></td>
                <td><button style='font-size: 25px'>⌈⬚⌉</button></td>
            </tr>
            <tr>
                <td><button onclick='f(7)' title='7'>7</button></td>
                <td><button onclick='f(8)' title='8'>8</button></td>
                <td><button onclick='f(9)' title='9'>9</button></td>
                <td><button>÷</button></td>
                <td><button>·</button></td>
                <td><button>⬚!</button></td>
            </tr>
            <tr>
                <td><button onclick='f(4)' title='4'>4</button></td>
                <td><button onclick='f(5)' title='5'>5</button></td>
                <td><button onclick='f(6)' title='6'>6</button></td>
                <td><button>×</button></td>
                <td><button>e</button></td>
                <td><button>π</button></td>
            </tr>
            <tr>
                <td><button onclick='f(1)' title='1'>1</button></td>
                <td><button onclick='f(2)' title='2'>2</button></td>
                <td><button onclick='f(3)' title='3'>3</button></td>
                <td><button>-</button></td>
                <td><button>φ</button></td>
                <td><button>τ</button></td>
            </tr>
            <tr>
                <td><button onclick='f(0)' title='0'>0</button></td>
                <td><button>.</button></td>
                <td><button>=</button></td>
                <td><button>+</button></td>
                <td><button>i</button></td>
                <td><button></button></td>
            </tr>
        </table>
        <script src='https://code.jquery.com/jquery-2.1.0.js'></script>
        <script>
            thescreen.style.width = String(thehead.offsetWidth - (AC.offsetWidth - 60)) + 'px'
            
            var list = [];
            
            var writeInput = function (theList) {
                if (theList.length === 0) {
                    return '<math xmlns="http://www.w3.org/1998/Math/MathML"></math>';
                };
                code = '<math xmlns="http://www.w3.org/1998/Math/MathML">';
                theCode = [theList[0].text, theList[0].type]
                for (i=1; i<theList.length; i++) {
                    if (theList[i].type != theCode[1]) {
                        code += '<' + theCode[1] + '>' + theCode[0] + '</' + theCode[1] + '>'
                        theCode[1] = theList[i].type
                        theCode[0] = ''
                    } else {
                        theCode[0] += String(theList[i].text)
                    }
                };
                code += '<' + theCode[1] + '>' + theCode[0] + '</' + theCode[1] + '></math>'
                return code;
            };
            
            var Num = function (n) {
                this.text = n;
                this.type = 'mn';
            };
            
            var change = function () {
                inputs = writeInput(list);
                $('#thescreen').empty();
                $('#thescreen').append(inputs);
            };
            
            var f = function (text) {
                if (typeof text === 'number') {
                    list.push(new Num(text));
                };
                change();
            };
            
            var backSpace = function () {
                if (list.length > 0) {list.pop();};
                change();
            };
            
            var A_C = function () {
                list = [];
                change();
            };
        </script>
        
    </body>
</html>