Print out JS generated data after window has loaded

Problem:

Printing out JS generated HTML code and text after page has been loaded. If I print out with document.write the HTML content gets replaced by the JS generated data.

Code:

I am trying to avoid document.write and use innerHTML and innerText instead, but it's not working.

<script>
    function loadXMLDoc(filename)
    {
        if (window.XMLHttpRequest)
        {
            xhttp = new XMLHttpRequest();
        }
        else // code for IE5 and IE6
        {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhttp.open("GET",filename,false);
        xhttp.send();

        return xhttp.responseXML;
    }

    function init (){
        var xmlDoc, display, x, y, z, i, n, p;

        xmlDoc = loadXMLDoc("environment.xml");

        var main = document.getElementById('main');

        x = xmlDoc.getElementsByTagName('exercise');

        node.innerHTML("<ol>");

        for (i=0; i < x.length; i+=1)
        {
            y = x[i].getElementsByTagName("question");
            z = x[i].getElementsByTagName("answer");

            for( n=0; n<y.length; n++ ) 
            {
                main.innerHTML("<li>");
                main.innerText( y[n].childNodes[0].nodeValue );
                main.innerHTML("<ol type='a'>");

                for (p = 0; p < 4; p++)
                {
                    main.innerHTML("<li>");
                    main.innerText( z[p].childNodes[0].nodeValue );
                    main.innerHTML("</li>");
                }
                main.innerHTML("</ol>");
                main.innerHTML("</li>");
            }
        }

        main.innerHTML("</ol>");
    }

    window.onload = init;
</script>

<div id="main"></div>

Desired solution:

To print out the generated JS data in the middle of a HTML page. Output must be done with JS.