This page basically demonstrates how to programmatically manipulate the contents and structure of an HTML element (in this case a DIV) in order to produce a structured HTML based report. See source code at the bottom.

    <script language="JavaScript" type="text/javascript">
        var x,y;
        var ledger, control;
		var contributionCounter = 0;
        
        function mouseMoveHandler(e){            
            var ev;
            if (e) ev = e;
            else ev = event;
            
            //alert(ledger.style.left);
            if (ev.clientX){
                dX = parseInt(ev.clientX) - x;
                dY = parseInt(ev.clientY) - y;
            }
            else if (ev.X)
            {
                dX = parseInt(ev.X) - x;
                dY = parseInt(ev.Y) - y;
            }
            
            //window.status = dX + " - " + dY;            
            control.style.left = (parseInt(control.style.left) + dX) + "px";
            control.style.top = (parseInt(control.style.top) + dY) + "px"; 
            
            if (ev.clientX){
                x = parseInt(ev.clientX);
                y = parseInt(ev.clientY);
            }
            else if (ev.X){
                x = parseInt(ev.X);
                y = parseInt(ev.Y);            
            }
        }
        
        function ledgerDown(e){            
            var ev;
            if (e) ev = e;
            else ev = event;      
            //alert("ledgerDown()");
            if (ev.clientX){
                x = parseInt(ev.clientX);
                y = parseInt(ev.clientY);
            }
            else if (ev.X){
                x = parseInt(ev.X);
                y = parseInt(ev.Y);            
            }
            
            document.onmousemove = mouseMoveHandler;
        }
        
        function ledgerUp(e){
            var ev;
            if (e) ev = e;
            else ev = event;
               
            document.onmousemove = null;
        }
        
        function initElements(){
            document.body.onmouseup = ledgerUp;
            ledger = document.getElementById("ledger");
            ledger.onmousedown = ledgerDown;
            control = document.getElementById("control");
			var d = new Date();
            var year;
            if (d.getFullYear) year = d.getFullYear();
            else year = d.getYear();
            
	    document.getElementById("form_date").value = d.getDate() + 
                "/" + d.getMonth() + "/" + year;
	    document.getElementById("form_year").value = year.toString();
            //alert(year);
        }
		
		function addDetails(){
			var name = document.getElementById("form_name").value;
			var month = document.getElementById("form_month").value;
			var year = document.getElementById("form_year").value;
			var date = document.getElementById("form_date").value;
			document.getElementById("name").innerHTML = name;
			document.getElementById("month").innerHTML = month;
			document.getElementById("date").innerHTML = date;
			document.getElementById("year").innerHTML = year;
		}
		
		function addContribution(){
		    var title = document.getElementById("form_title").value;
                    var i = document.getElementById("form_type").selectedIndex;
		    var type = document.getElementById("form_type").options[i].value;
		    var achievement = document.getElementById("form_achievement").value;
		    var relevance = document.getElementById("form_relevance").value;
			
		    contributionCounter++;
			
		    var report = document.getElementById("report");
			
		    var el = document.createElement("DIV");
     var myHTML = "<table width=\"100%\" border=\"1\"" + 
     "style=\"border:solid black 1px\">" +
     "<tr><td colspan=\"2\"><h3>Contribution" + 
     contributionCounter + "</h3></td></tr>" +
     "<tr><td><strong>Title </strong></td>" + 
     "<td width=\"100%\">" + title + "</td></tr>" +
     "<tr><td><strong>Type </strong></td><td>" + 
     type + "</td></tr>" +
"<tr><td><strong>Achievement </strong></td><td>" +  
     achievement + "</td></tr>" +
     "<tr><td><strong>Relevance to EU policy or" +
     "R&D </strong></td><td>" + relevance + 
     "</td></tr>" +
     "</table><br>";						 						
		    el.innerHTML = myHTML;
            
                    var anchorElement = document.getElementById("anchorElement");
		    report.insertBefore(el, anchorElement);
			
		    document.getElementById("form_title").value = "";
		    document.getElementById("form_achievement").value = "";
		    document.getElementById("form_relevance").value = "";		
			
		    //document.getElementById("form_relevance").value = el.outerHTML;
		}
		
		function getReport(){
		
			alert("IMPORTANT: the report should be saved as HTML only" +
                              "(NOT \"html complete\" and NOT as .mht)");
			
			var report = window.open("about:blank","_blank");
			
			report.document.open();
			report.document.write("<html><head><title>SCNI" + 
                            "Monthly Report</title></head><body>" +
			    document.getElementById("report").innerHTML +
		            "</body></html>");
			report.document.close();
		}
		
    </script>