js动态生成html元素

这里给出个简单的例子，为了方便以后需要时使用：

function add(){
	
	var table = document.getElementById("tbody");

	var tr = document.createElement("tr");
	
	table.appendChild(tr);
	
	var td1 = document.createElement("td");
	
	var td2 = document.createElement("td");
	
	tr.appendChild(td1);
	
	tr.appendChild(td2);
	
	var text =  document.createElement("input");
	text.type = "text";
	text.name = "name";
	td1.appendChild(text);
	
	var sel = document.createElement("select");
	sel.name = "state"
	td2.appendChild(sel);
	
	sel.options.add(new Option("预占","0"));
	sel.options.add(new Option("空闲","1"));
}
function del(){
	var trs = document.getElementsByTagName("tr");
	
	var tbody = document.getElementById("tbody");
	tbody.removeChild(trs[trs.length - 1]);
}

 

 其中add()函数是向一个table里面增加个tr并添加文本框和一个下拉列表

下面是html

<table id="tab" border="1">
		<tbody id="tbody">
			<tr>
				<td align="right" colspan="2">
				<input type="button" value="添加" onclick="add()" />
				<input type="button" value="删除" onclick="del()" />
				</td>
			</tr>
			<tr>
				<td>资源名称</td>
				<td>资源状态</td>
			</tr>
			<tr>
				<td>gfdfdsafsd</td>
				<td>0</td>
			</tr>
		</tbody>
	</table>