Updating MathJax with AsciiMath input

Question

I have the following div:

<div id="math-display">``</div>

The page runs MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'math-display']) when the page is loaded. ` is the delimiter for AsciiMath input.

If I were to use latex to enter equations, and wanted to refresh math-display, I could run the following code:

MathJax.Hub.Queue(['Text', MathJax.Hub.getAllJax('math-display')[0], 'new latex here'])

However, if I were to put AsciiMath input instead of latex, the result is still rendered with latex (even if AsciiMath delimiters are used in the 'new latex here' string). How do I update the displayed MathJax with AsciiMath input, instead of latex?

If possible, I would prefer not calling Typeset to update.

Answer 1

Text() method only update text of the object instance, and this object already has the type of input as a property. This type of input is defined by the delimiters when the object is created.

When you use text() you modify the string that was between the delimiters, so you don't need delimiters, but you can't change input type.

But you can typeset a single element. It'll create a new object with the input defined by the delimiters. See snippet for example:

document.querySelector('#switch').onclick = function() {
  //inputJax property defines type of input  
  alert('input type of math-display is: ' + MathJax.Hub.getAllJax('math-display')[0].inputJax);
  
  //To change type of input, you can modifiy content of math-display, not of the math object that was generated 
  document.querySelector('#math-display').textContent = "$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$";
  
  //You typeset only element that has id math-display. 
  MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'math-display']);

}

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
<div id="math-display">`sum_(i=1)^n i^3=((n(n+1))/2)^2`</div>
<button id="switch">Change content</button>