Mit Javascript und DOM, MathML-Code erzeugen

[kostja250581]

Das wäre echt viel Code. Es sind zig Schleifen und if else Befehle damit das ganze die Struktur im HTML-Docoment bekommt die ich haben möchte. Ich weiß nicht wie ich das anschaulich hier darstellen kann.

Ich mach ein kleines Beispiel und hoffe es wird verstanden!

Es soll ein Bruch mit zwei Zahlen in dem folgenden <div> dargestellt werden!

  
<div>  
    <math xmlns="http://www.w3.org/1998/Math/MathML">  
        <mstyle id="0" displaystyle="true">  
  
        </mstyle>  
    </math>  
</div>  

Hier die ein Beispielscript für so eine Funktion

  
function zeichnen() {  
    bruch_einzeichnen();  
    zahl_einzeichnen('58');  
    zahl_einzeichnen('76');  
}  
  
function bruch_einzeichnen() {       //Zeichnet die <mfrac>-Tags ein  
    var mfrac = document.createElementNS('mfrac');  
    mfrac.id='1';    // Der <mfrac>-Tag bekommt eine ID  
    document.getElementById('0').appendChild(mfrac); //Das <mfrac> wird an die letzte position der id='0' geschrieben  
}  
  
funktion zahl_einzeichnen(inhalt) { //Selbe wie bei <mfrac> nur ohne ID vergabe und mit Inhalt  
    var mn = document.createElementNS('mn');  
    var zahl = document.createTextNode (inhalt);  
    mn.appendChild(zahl);  
    document.getElementById('1').appendChild(mn);  
}  

Wenn ich jetzt die Funktion Zeichnen auslöse, z.b durch einen Link

  
<a href="#" onClick="zeichnen;">Zeichnen</a>  

wird wie gewüscht alles so erstellt

  
<div>  
    <math xmlns="http://www.w3.org/1998/Math/MathML">  
        <mstyle id="0" displaystyle="true">  
  
<!-------------------mit DOM erstellter Code------------------------------>  
  
            <mfrac id="1">  
                <mn>58</mn>  
                <mn>76</mn>  
            </mfrac>  
<!------------------------------------------------------------------------>  
  
        </mstyle>  
    </math>  
</div>  

Alles wird so gemacht wie ich es will. Leider nur im HTML-Code. Als Anzeige kommt nur 5876

Was mach ich falsch ?