使用JavaScript动态创建<math>元素无法正常渲染的技术问题

问题现象 #

• 手动编写的<math>相关元素能正常渲染出数学公式
• 用JavaScript动态创建的<math>元素完全不显示预期效果（比如示例里的分数只会显示普通文本）
• 就算通过浏览器检查器能看到DOM已经更新，给现有<math>节点插入新子元素后，页面上的公式外观也毫无变化

示例代码 #

动态创建的JS代码（无法正常渲染）

let math = document.createElement('math');
math.setAttribute('display', 'block');

let mfrac = document.createElement('mfrac');
let ms1 = document.createElement('ms');
let ms2 = document.createElement('ms');

ms1.textContent = 'this';
ms2.textContent = 'doesn\'t';

mfrac.appendChild(ms1);
mfrac.appendChild(ms2);

math.appendChild(mfrac);

document.body.appendChild(math);

手动编写的HTML代码（可正常渲染）

<!DOCTYPE html>
<html>

<body>
  <math display="block">
        <mfrac>
            <ms>this</ms>
            <ms>works</ms>
        </mfrac>
    </math>
</body>

</html>

异常效果截图 #

问题原因 #

MathML是属于特定命名空间的元素，普通document.createElement()创建的元素默认落在HTML命名空间下，浏览器不会把它们识别为MathML公式，自然不会渲染成数学格式。

解决方法 #

改用document.createElementNS()方法创建元素，指定MathML的官方命名空间http://www.w3.org/1998/Math/MathML即可：

修改后的可正常运行的JS代码

// 定义MathML命名空间常量
const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';

// 用createElementNS创建所有MathML元素
let math = document.createElementNS(MATHML_NS, 'math');
math.setAttribute('display', 'block');

let mfrac = document.createElementNS(MATHML_NS, 'mfrac');
let ms1 = document.createElementNS(MATHML_NS, 'ms');
let ms2 = document.createElementNS(MATHML_NS, 'ms');

ms1.textContent = 'this';
ms2.textContent = 'now works';

mfrac.appendChild(ms1);
mfrac.appendChild(ms2);
math.appendChild(mfrac);

document.body.appendChild(math);

补充提示 #

如果要更新已有的MathML元素，新增的子元素同样需要用createElementNS()创建，不能用普通的createElement()，否则浏览器还是不会识别并更新渲染效果。

内容的提问来源于stack exchange，提问作者DoD