Q522 Is there a way to display the value of a variable (such as a text string) on the web page without using document.write (which clears the page) or one of the aesthetically unpleasing "box" solutions--writing into text boxes, alert boxes, etc?

<script language="JavaScript"><!--
tableArray = new Array();
tableArray[1] = '<tr><td colspan="2">This is row 1 of the table Array. It spans two columns<\/td><\/tr>';
tableArray[2] = '<tr><td>column 1 row 2<\/td><td>column2 row 2<\/td><\/tr>';
tableArray[3] = '<tr><th>table heading (c1,r3)<\/th><th>table heading (c2,r3)<\/th><\/tr>';

viewArray = new Array();
viewArray[1] = viewArray[2] = viewArray[3] = false;

function refreshTable() {
    var output = '';
    for (var i = 1; i <= tableArray.length; i++) {
        if (viewArray[i])
            output += tableArray[i];
    }
    document.all('myTable').innerHTML = '<table border="1">' + output + '<\/table>';
}

function clicked(x) {
    viewArray[x] = !viewArray[x];
    refreshTable();
}
//--></script>

<div id="myTable"></div>

<form>
row 1: <input type="checkbox" onClick="clicked(1)">
<br>
row 2: <input type="checkbox" onClick="clicked(2)">
<br>
row 3: <input type="checkbox" onClick="clicked(3)">
</form>

<script language="JavaScript"><!--
tableArray = new Array();
tableArray[1] = '<tr><td colspan="2">This is row 1 of the table Array. It spans two columns<\/td><\/tr>';
tableArray[2] = '<tr><td>column 1 row 2<\/td><td>column2 row 2<\/td><\/tr>';
tableArray[3] = '<tr><th>table heading (c1,r3)<\/th><th>table heading (c2,r3)<\/th><\/tr>';

viewArray = new Array();
viewArray[1] = viewArray[2] = viewArray[3] = false;

function refreshTable() {
    var output = '';
    for (var i = 1; i <= tableArray.length; i++) {
        if (viewArray[i])
            output += tableArray[i];
    }
    document.layers['myTable'].document.open();
    document.layers['myTable'].document.writeln('<table border="1">' + output + '<\/table>');
    document.layers['myTable'].document.close();

}

function clicked(x) {
    viewArray[x] = !viewArray[x];
    refreshTable();
}
//--></script>

<layer id="myTable">
</layer>

<br><br><br><br>

<form>
row 1: <input type="checkbox" onClick="clicked(1)">
<br>
row 2: <input type="checkbox" onClick="clicked(2)">
<br>
row 3: <input type="checkbox" onClick="clicked(3)">
</form>