Insert 'LATEX' - text dynamically in html

I want to insert 'LATEX'-text in html file dynamically by MathJax.

<html>
<head>
    <title>MathJax MathML Test Page</title>
    <script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
                           tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
                           });
    </script>
</head>
<body>
    <div id="content" contenteditable="true" style="font-family: Helvetica">This is
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
    function myFunction() {
        var newP = document.createElement("p");
        newP.innerHTML = "\(ax^2 + bx + c = 0\)";
        my_div = document.getElementById("2");
        document.body.insertBefore(newP, my_div);
    }
    </script>
    <p id = '2'>
       \(ax^2 + bx + c = 0\)
    </p>
</body>

This code all doing right :

<p id = '2'>
   \(ax^2 + bx + c = 0\)
</p>

But when i insert new paragraph dynamically, i see wrong text. Sorry for my english, but i actually don't know how to fix it.

Solution

Try this:

function myFunction() {
  var newP = document.createElement("p");
  newP.id = 'unique-id';
  newP.innerHTML = "\\(ax^2 + bx + c = 0\\)";
  my_div = document.getElementById("2");
  document.body.insertBefore(newP, my_div);
  MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'unique-id']);
}

Some remarks:

the delimiters are \( and \), but because you are including them in a Javascript string, where \ is special, you need to use two backslashes;
after you inserted your new <p> element, you need to tell MathJax to typeset it, which is what MathJax.Hub.Queue(...) does; it is given the id of the newly created element, although that's not strictly necessary (but it is faster); be aware that id's have to be unique;
an id of 2 is not valid in HTML;