Add New Row On Button Click

[nelliott10]

I have produced some code which adds a table row on a button click, which can be seen below. However, I would like the new row to be added at the bottom of the table instead of the top. How can this be achieved?

function addRow()
   {
    //add a row to the rows collection and get a reference to the newly added row

    var newRow = document.all("lines").insertRow();
    
    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='button' value='Remove' onclick='removeRow(this);'/>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='quantity'>"
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<select type='text' name='product'>";
        
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='barcode'>";
      
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='checkbox' name='chk'>";  
   }

[saiprem]

I have produced some code which adds a table row on a button click, which can be seen below. However, I would like the new row to be added at the bottom of the table instead of the top. How can this be achieved?

function addRow()
   {
    //add a row to the rows collection and get a reference to the newly added row

    var newRow = document.all("lines").insertRow();
    
    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='button' value='Remove' onclick='removeRow(this);'/>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='quantity'>"
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<select type='text' name='product'>";
        
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='barcode'>";
      
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='checkbox' name='chk'>";  
   }

var tbl = document.getElementById('tabId');
	var lastRow = tbl.rows.length;
	var tr = tbl.insertRow(lastRow);  
	var td = tr.insertCell(-1);
	td.setAttribute('align','center');
	td.innerHTML = 'your content';

[nelliott10]

I know have the above code working however, I am sure how to get values into the select element, I wondering if it could be linked to the static table row which is coded using html