実現したいこと

JavaScriptでmathjaxの数式をhtmlに埋め込みたいです。

現在の状況

ボタンを押す前は以下のように表示されます。

ボタンを押した後、textContentやinnerTextで数式を置き換えるのですが、
mathjaxの効果がありません。

試したこと

Asciiコードを使ってみましたが、そのまま$になったり変換されなかったりしました。

mathArea.textContent = "\x24" + "a" + "\x24";
結果： "$a$"

mathArea.textContent = '&#36; a &#36;';
結果: "&#36; a &#36;"

現在のソースコード

javascript
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Math</title>
7</head>
8<body>
9  <button id="btn">ボタン</button>
10  <p>↑ ボタンを押すと平方完成します!</p>
11  <div id="math" class="math">
12      $y = x^2 - 4x + 2$
13  </div>
14  <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
15  <script type="text/x-mathjax-config">
16    MathJax.Hub.Config({
17    TeX: { equationNumbers: { autoNumber: "AMS" }},
18    tex2jax: {
19      inlineMath: [ ['$','$'], ["\(","\)"] ],
20      processEscapes: true
21    },
22    "HTML-CSS": { matchFontHeight: false },
23    textAlign: "left",
24    textIndent: "2em"
25    });
26  </script>
27  <script>
28    const btn = document.getElementById('btn');
29    const mathArea = document.querySelector('div');
30    btn.onclick = function() {
31      mathArea.textContent = '$y = (x - 2)^2 - 2$';
32      document.querySelector('p').innerText = '平方完成 Complete!!';
33      btn.disabled = true;
34    }
35  </script>
36</body>
37</html>