Modifying Math on the Page

If you are writing a dynamic web page where content containing mathematics may appear after MathJax has already typeset the rest of the page, then you will need to tell MathJax to look for mathematics in the page again when that new content is produced. To do that, you need to use the MathJax.Hub.Typeset() method. This will cause the preprocessors (if any were loaded) to run over the page again, and then MathJax will look for unprocessed mathematics on the page and typeset it, leaving unchanged any math that has already been typeset.

You should not simply call this method directly, however. Because MathJax operates asynchonously (see Synchronizing with MathJax for details), you need to be sure that your call to MathJax.Hub.Typeset() is synchronized with the other actions that MathJax is taking. For example, it may already be typesetting portions of the page, or it may be waiting for an output jax to load, etc., and so you need to queue to typeset action to be performed after MathJax has finished whatever else it may be doing. That may be immediately, but it may not, and there is no way to tell.

To queue the typeset action, use the command

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

This will cause MathJax to typeset the page when it is next able to do so. It guarantees that the typesetting will synchronize properly with the loading of jax, extensions, fonts, stylesheets, and other asynchornous activity, and is the only truely safe way to ask MathJax to process additional material.

The MathJax.Hub.Typeset() command also accepts a parameter that is a DOM element whose contents is to be typeset. That could be a paragraph, or a <div> element, or even a MathJax math <script> tag. It could also be a the DOM id of such an object, in which case, MathJax will look up the DOM element for you. So

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathExample"]);

would typeset the mathematics contained in the element whose id is MathExample. This is equivalent to

var math = document.getElementById("MathExample");
MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);

If no element or element id is provided, the whole document is typeset.

Note that the MathJax.Hub.Queue() method will return immediately, regardless of whether the typesetting has taken place or not, so you can not assume that the mathematics is visible after you make this call. That means that things like the size of the container for the mathematics may not yet reflect the size of the typeet mathematics. If you need to perform actions that depend on the mathematics being typeset, you should push those actions onto the MathJax.Hub.queue as well.

This can be quite subtle, so you have to think carefully about the structure of your code that works with the typeset mathematics. Also, the things you push onto the queue should be Callback objects that perform the actions you want when they are called, not the results of calling the functions that do what you want.

Manipulating Individual Math Elements

If you are not changing a complete DOM structure, but simply want to update the contents of a single mathematical equation, you do not need to use innerHTML and MathJax.Hub.Typeset() to preprocess and process an elements new content. Instead, you can ask MathJax to find the element jax for the math element on the page, and use its methods to modify and update the mathematics that it displays.

For example, suppose you have the following HTML in your document

<div id="MathDiv">
  The answer you provided is: ${}$.
</div>

and MathJax has already preprocessed and typeset the mathematics within dollar signs (it will be blank). A student has typed something elsewhere on the page, and you want to typeset their answer in the location of the mathematics that is already there. You could replace the entire contents of the MathDiv element and call MathJax.Hub.Typeset() as described above, but there is more efficient approach, which is to ask MathJax for the element jax for the mathematics, and call its method for replacing the formula shown by that element. For example:

var math = MathJax.Hub.getAllJax("MathDiv")[0];
MathJax.Hub.Queue(["Text",math,"x+1"]);

This looks up the list of math elements in MathDiv element (there is only one) and takes the first one (element 0) and stores it in math. This is an element jax object (see the Element Jax specification for details), which has a Text() method that can be used to set the input text of the math element, and retypeset it.

Again, since the typesetting should be synchronized with other actions of MathJax, the call should be pushed onto the MathJax.Hub.queue, as shown above, rather than called directly. The example above performs the equivalent of math.Text("x+1") as soon as MathJax is able to do so. Any additional actions the rely on the equation x+1 actually showing on screen should also be pushed onto the queue so that they will not occur before the math is typeset.

The actions you can perform on an element jax include:

Text(newmath)

to set the math text of the element to newmath and typeset.

Reprocess()

to remove the output and reproduce it again (for example, if CSS has changed that would alter the spacing of the mathematics).

Remove()

to remove the output for this math element (but not the original <script> tag).

SourceElement()

to obtain a reference to the original <script> object that is assocaited with this element jax.

Note that once you have located an element jax, you can keep using it and don’t have to look it up again. So for the example above, if the student is going to be able to type several different answers that you will want to typeset, you can look up the element jax once at the beginning after MathJax has processed the page the first time, and then use that result each time you adjust the mathematics to be displayed.

To get the element jax the first time, you need to be sure that you ask MathJax for it after MathJax has processed the page the first time. This is another sitaution where you want to use the MathJax queue. If your startup code performs the commands

var studentDisplay = null;
MathJax.Hub.Queue(function () {
  studentDisplay = MathJax.Hub.getAllJax("MathDiv");
});

then you can use

MathJax.Hub.Queue(["Text",studentDisplay,studentAnswer])

to change the student’s answer to be the typeset version of whatever is in the studentAnswer variable.

Here is a complete example that illustrates this approach

<html>
<head>
<title>MathJax Dynamic Math Test Page</title>

<script src="/MathJax/MathJax.js">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>

</head>
<body>

<script>
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math = null;                // the element jax for the math output.

    //
    //  Get the element jax when MathJax has produced it.
    //
    QUEUE.Push(function () {
      math = MathJax.Hub.getAllJax("MathOutput")[0];
    });

    //
    //  The onchange event handler that typesets the
    //  math entered by the user
    //
    window.UpdateMath = function (TeX) {
      QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
    }
  })();
</script>

Type some TeX code:
<input id="MathInput" size="50" onchange="UpdateMath(this.value)" />
<p>

<div id="MathOutput">
You typed: ${}$
</div>

</body>
</html>