creating HTML tags dynamically through javascript

Hey,
I was about to create dynamic Table rows & put html tags into it. Also user(I) can delete unwanted rows from the table.

The following code I found the following code very helpful.
//creating HTML tags dynamically through javascript
// The following code is used to create HTML tags (<a>,<input>,<select>,checkbox)dynamically through javascript into given table
//Also we can delete particular row from the given table

note: Here ‘table’ which we are passing to different functions is the table on which we are working.
var countvar = 0;
var datatypeArray = new Array();
datatypeArray = new Array(
‘String’,'CDATA’,'integer’);

var tbl = document.getElementById(table);
var lastRow = tbl.rows.length;
// if there’s no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
//var textNode = document.createTextNode(iteration);
var fieldname = document.createElement(‘input’);
var newfieldname = ‘fieldname’ + iteration;
fieldname.type = ‘text’;
fieldname.name = ‘fieldname’ + iteration;
fieldname.id = newfieldname;
fieldname.size = 25;
cellLeft.appendChild(fieldname);

// select cell
var celldatatype = row.insertCell(1);
var fielddatatype = document.createElement(‘select’);
fielddatatype.name = newfieldname+’_datatype’;
fielddatatype.id = newfieldname+’_datatype’;
theOption=document.createElement(“OPTION”);
theText=document.createTextNode(“Select the data type”);
theOption.appendChild(theText);
//this option has a value, an URL, so we set the value
theOption.setAttribute(“value”,”Select the data type value”);
fielddatatype.appendChild(theOption);

//alert(datatypeArray.length);

for (x=0; x < datatypeArray.length; x++)
{
optionItem =document.createElement(‘option’);
optionItem.appendChild(document.createTextNode(datatypeArray[x]));
optionItem.setAttribute(“value”,datatypeArray[x]);
fielddatatype.appendChild(optionItem);
}

celldatatype.appendChild(fielddatatype);

//Checkbox
var cellcheckbox = row.insertCell(3);
var fieldcheckbox = document.createElement(‘input’);
fieldcheckbox.type = ‘checkbox’;
fieldcheckbox.name = newfieldname+’_required’;
fieldcheckbox.value = 1;
// fieldcheckbox.size = 20;
cellcheckbox.appendChild(fieldcheckbox);

//Delete link
// create a new link and a text
var celldellink = row.insertCell(4);
var fielddellink = document.createElement(‘a’)
pickText=document.createTextNode(‘Delete’);

fielddellink.appendChild(pickText);
fielddellink.href=”#”;
fielddellink.onclick=function(){ delRow(‘displayform’,lastRow-1); }
celldellink.appendChild(fielddellink);
}

function dellastRow(table)
{
var tbl = document.getElementById(table);
var lastRow = tbl.rows.length;
tbl.deleteRow(lastRow-1);
}
function delRow(tableid,rownum)
{
var rowtobedeleted = parseInt(rownum)+2;
var tbl = document.getElementById(tableid);
// var lastRow = tbl.rows.length;
// tbl.deleteRow(rowtobedeleted);
try
{
tbl.deleteRow(rowtobedeleted);
}
catch (e)
{ //The catch code is there because of an exception that is sometimes thrown when accessing the row.rowIndex in Firefox. Since in my particular case, the user is often deleting the last row, I put a catch here and call deleteRow() with a -1 (to mean, delete the last row).
tbl.deleteRow(-1);
}
}