How to get the DOM content as seen in inspect element window after rendering?

Question

I am trying to get the SVG generated using MathJax using JS and animate it like here

In my code, I have

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    SVG: {
      useGlobalCache: true,
      useFontCache: false
    }
  })
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_SVG"></script>

<div id="sup">$$a$$</div>

When I check the rendered DOM using inspect element, i get the contents of div with id sup as

<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<div class="MathJax_SVG_Display" style="text-align: center;">
    <span style="font-size: 100%; display: inline-block; position: relative;" class="MathJax_SVG" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>a</mi></math>" role="presentation">
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1.23ex" height="1.454ex" style="vertical-align: -0.227ex;" viewBox="0 -528.2 529.5 625.9" role="img" focusable="false" aria-hidden="true">
            <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
                <path stroke-width="1" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
            </g>
        </svg>
        <span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
            <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>a</mi></math>
        </span>
    </span>
</div>
<script type="math/tex; mode=display" id="MathJax-Element-1">a</script>

But when I try to get the innerHTML of the div with id sup using

window.addEventListener('load', function(){
  console.log(document.getElementById("sup").innerHTML);
})

I get $$a$$ as output.

How can I get the output same as that shown in inspect element?

score 2 · Accepted Answer · answered Dec 16 '19 at 15:27

Your problem is that MathJax is never loaded when you console.log on window.load.

First, you need to wait until MathJax is loaded and rendered in order to get the desired output result.

I've found This question which might help you

The way to synchronize with MathJax's startup actions it to register a StartupHook that will fire when the startup is complete. For example, you can use MathJax.Hub.Register.StartupHook("End",function () { console.log(document.getElementById("sup").innerHTML); });

How to get the DOM content as seen in inspect element window after rendering?

1 Answers1