sdiehl/insert-mathml.html

## insert-mathml.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insert mathml</title>
<script type="text/javascript">
function addSqrt(){

 var mml_namespace = "http://www.w3.org/1998/Math/MathML";

 // ************************************************************
 // createElement creates a vanilla HTML element in the with the
 // namespace http://www.w3.org/1999/xhtml, so you'll want to use
 // createElementNS to manually specify the namespace. See:
 // https://developer.mozilla.org/en/DOM/document.createElementNS
 // ************************************************************

 //create a new sqrt element
 //and give it value of 3
 var newNum = document.createElementNS(mml_namespace,"mn");
 var num = document.createTextNode("3");

 newNum.appendChild(num);
 var newSqrt = document.createElementNS(mml_namespace,"msqrt");

 newSqrt.appendChild(newNum);
 //add the newly created element and it's content into the DOM
 var math = document.getElementById("math");
 math.appendChild(newSqrt);
}

function clone(){
 var math = document.getElementById("math");
 var clone = math.cloneNode(true);
 math.parentNode.appendChild(clone);
}

function reload(){
 var math = document.getElementById("math");
 var clone = math.cloneNode(true);
 math.parentNode.replaceChild(clone,math);
}

</script>
<style>
#buttons{
 margin:0 auto;
 width:400px;
}
#buttons button{
 border-radius:1ex;
 background-color:#fff;
}
body{
 font-family:'Linux Libertine','Linux Libertine O',Cambria,Times,'Times New Roman','Cambria Math',STIXGeneral,serif;
 font-size:18px;
}
math{
 font-family:'Linux Libertine','Linux Libertine O',Cambria,Times,'Times New Roman','Cambria Math',STIXGeneral,serif;
 font-size:18px !important;
}
math[display="block"]{
 border:1px solid blue;
 height:1.5em;
 line-height:1.5em;
 text-align:left;
}
</style>
</head>

<body>
<button onclick="addSqrt();">insert &#x0221A;</button>
<div id="eq">
<math display="block" id="math"><mi>x</mi><mo>=</mo></math>
</div>
</body>
</html>