The element works as expected when written by hand, but doesn’t render properly when created with js dynamically:
<!DOCTYPE html>
<html>
<body>
<math display="block">
<mfrac>
<ms>this</ms>
<ms>works</ms>
</mfrac>
</math>
<script>
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);
</script>
</body>
</html>
Screenshot of the fraction not rendering
Updating the existing elements by inserting new children doesn’t change their appearance at all, despite the document changing in the inspector.