Javascript add html elements problem

JavaScript
1

Hi all i have an html file that i am wanting to use javascript to dynamically create html elements and place them into a special table here this is what i have atm

but not sure what is causing the problem because nothing gets printed this is what i have atm

<script type="application/javascript">/*
function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\\'#\\' onclick=\\'removeElement('+divIdName+')\\'>Remove the div "'+divIdName+'"</a>';
  ni.appendChild(newdiv);
}*/
function add(type) {

	//Create an input type dynamically.
	var element = document.createElement("input");
	var name = document.me.elid.value;
	var user = document.me.e.value;
	var heading = document.me.heading.value;
	var tr = document.createElement("tr");
	//Assign different attributes to the element.
	element.setAttribute("type", type);
	element.setAttribute("value", user);
	element.setAttribute("name", name);
	//
	th.innerHTML('<th>'+heading+'</th><th>'+element+'</th>');
	var foo = document.getElementById("fooBar");
	//Append the element in page (in span).
	foo.appendChild(th);

}
</script>
<body><!--
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>-->
<FORM name="me">
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<table>
	<tr>
    	<th>Heading</th>
        <th><input type="text" name="heading" value="" /></th>
    </tr>
	<tr>
    	<th>Select Element</th>
    	<th>Element Id</th>
    	<th>Element Value</th>
    </tr>
	<tr>
    	<th><SELECT name="element">
	<OPTION value="button">Button</OPTION>
	<OPTION value="text">Textbox</OPTION>
	<OPTION value="radio">Radio</OPTION>
</SELECT></th>
        <th><input type="text" id="elid" value="" /></th>
        <th><input type="text" id="e" value="" /></th>
    </tr>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

<span id="fooBar">&nbsp;</span>
</table>
</FORM>
</body>

is there somthing i am missing on this can anyone1 help me thanks

2

th is not defined.
appendChild takes adom created element(s) not a string, although IE will accept a string.
The document fragment is inserted into an invalid table.

Start with a valid table and insert elements using the dom methods, not innerHTML.

application/javascript does not work in IE, use text/javascript

3

These are the major issues that I’m spotting here:

[list][]application/javascript is not supported
[]The th variable is not defined
[]End of table requires a tr & td section around the content
[]Improper use of innerHTML[/list]

That should at least allow you to run the code.