用js构造一个html<math>元素并不能使其正确渲染

Question

<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);

<!DOCTYPE html>
<html>

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

</html>

分数未渲染的屏幕截图：

通过插入新的子元素来更新现有的

<math>

元素根本不会改变它们的外观，尽管文档在检查器中发生了变化。

Answer 1

math

及其关联元素（如

svg

）是“它现在位于 HTML 规范中，但 JS 仍然只将它们构建为命名空间 XML 元素”之一，因此您需要将

createElementNS

与

 一起使用http://www.w3.org/1998/Math/MathML

命名空间。

如果您不这样做，它就不算是“真正的”数学元素：

const MathNS = `http://www.w3.org/1998/Math/MathML`;
const math = document.createElementNS(MathNS, `math`);
math.setAttribute(`display`, `block`);

let mfrac = document.createElementNS(MathNS, `mfrac`);
let ms1 = document.createElementNS(MathNS, `ms`);
let ms2 = document.createElementNS(MathNS, `ms`);

ms1.textContent = `this`;
ms2.textContent = `also works`;

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

document.body.appendChild(math);

<!DOCTYPE html>
<html>

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

</html>

用js构造一个html<math>元素并不能使其正确渲染

问题描述投票：0回答：1

1个回答

最新问题

用js构造一个html<math>元素并不能使其正确渲染

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1