Render a string via Mathjax

Question

I have an text area that where I expect the user to enter the mathematical expression. I wan't to render any results immediately, just like it works here on SO.
Something like:

<div id="preview"></div>

function onkeyup(event) {
    var prev = document.getElementById("preview");
    Using just a HTML string:
    prev.innerHTML = MathJax.renderString(this.value);

    ... or get DOM object tree instead:
    //Remove previous children
    prev.innerHTML = "";
    //Append new DOM tree
    var tree = MathJax.createDOM(this.value);
    prev.appendChild(tree);
}

Is that possible? Or will I have to put this.value in some div element and than have MathJax parse that element? (that would be stupid)

Answer 1

The task you are trying to perform is documented here, and there is a live example here.

Basically, the method is to use

<div id="preview">\(\)</div>

and then typeset the preview. Once that completes, use the getAllJax() method to get the empty math element jax. Something like

var jax;
MathJax.Hub.Queue(
  ["Typeset",MathJax.Hub,"preview"],
  function () {jax = MathJax.Hub.getAllJax("preview")[0]}
);

Then use the element jax's Text() method to change the math that it displays.

function onkeyup(event) {
  MathJax.Hub.Queue(["Text",jax,this.value]);
}