Javascript 使用js构造一个html<；ath&>元素并不能使其正确呈现

发布于03月03日

<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>个元素根本不会更改它们的外观，尽管判断器中的文档发生了更改.

推荐答案

math及其相关元素是两个"它现在在HTML规范中，但JS仍然只允许您将它们构建为命名空间的XML元素"之一(另一个是svg)，因此您需要将createElementNS与http://www.w3.org/1998/Math/MathML命名空间一起使用.如果你不这样做，它就不能算作"真正的"数学元素.

const MathNS = `http://www.w3.org/1998/Math/MathML`;
const createMathElement = (tag) => document.createElementNS(MathNS, tag);

const math = createMathElement(`math`);
math.setAttribute(`display`, `block`);

let mfrac = createMathElement(`mfrac`);
let ms1 = createMathElement(`ms`);
let ms2 = createMathElement(`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>