Can Javascript modify HTML elements created through Javascript? And can these be accessed on the server?
<p>I am trying to create a HTML table dynamically using the input from the user on the HTML form. The table gets created (initially) however it doesn't show up in the page source. Also, when I try to access this table again to add more rows to it, the Javascript function cannot find it. Can we access DOM elements in Javascripts even if they are not in the page source (i.e. created dynamically through JS)? If so, why isn't this code working?</p>

<pre><code>function inserttupletablerow() {

    //checks if all fields are filled and properly selected.
    var a = document.getElementById('ListBox2')
    var b = document.getElementById('ListBox3')
    var c = document.getElementById('ListBox1')
    if (a.value == '' || b.value == '' || c.value == '') {
        alert("Please select a value for all the fields!");
        return false;
    }
    if (a.value &gt;= b.value) {
        alert("Low channel should be lower than high channel!");
        return false;
    }


    //check if its the first entry. If so create table and fill first row.
    if (document.getElementById('tupletable') == null) {
        document.getElementById('table1wrapper').innerHTML = '&lt;table id="tupletable" border=2&gt;&lt;tr&gt;&lt;td&gt;CellName&lt;/td&gt;&lt;td&gt;Low Channel&lt;/td&gt;&lt;td&gt;High Channel&lt;/td&gt;' +
                '&lt;tr&gt;&lt;td&gt;' + document.getElementById('ListBox1').value + '&lt;/td&gt;' +
                '&lt;td&gt;' + document.getElementById('ListBox2').value + '&lt;/td&gt;' +
                '&lt;td&gt;' + document.getElementById('ListBox3').value + '&lt;/td&gt;&lt;/table&gt;';
        return false;
    }
    else { //check if duplicate exists.
        var matchcounter = 0;
        var tupletable = document.getElementById('tupletable');
        var cellnames = document.getElementById('ListBox1');

        for (var i = 0, allcellnames; allcellnames = cellnames.options[i]; i++)
            for (var j = 0, row; row = tupletable.rows[j]; j++)
                if (row.cells[0].value == allcellnames.value)
                    matchcounter++;  //increment the matchcounter if a match is found. If this is &gt; 2 then there is duplicate and flash alert.
        if (matchcounter &gt; 1) {
            alert('Duplicate cell name. Please choose different cell or reset selections.');
            return false;
        }
    }

    // By now all checks have been made. Insert the row now.
    var row = document.getElementById('tupletable').insertrow(document.getElementById('tupletable').rows.length);
    var cell0 = row.insertcell(0);
    var cell1 = row.insertcell(1);
    var cell2 = row.insertcell(2);
    cell0.innerHTML = document.getElementById('ListBox1').value;
    cell1.innerHTML = document.getElementById('ListBox2').value;
    cell2.innerHTML = document.getElementById('ListBox3').value;


    return false;
}
</code></pre>
