DOM操作HTML
<html>
<head>
<title></title>
<script type="text/javascript">
function insertStr()
{
var f = document.addForm;
var value = f.inputStr.value;
if(value!="")
{
//新建一个TextNode结点
var text = document.createTextNode(value);
//新建一个td类型的Element节点
var td = document.createElement("td");
//新建一个tr类型的Element节点
var tr = document.createElement("tr");
//新建一个tbody类型的Element节点
var tbody = document.createElement("tbody");
//将结点text加入到td中
td.appendChild(text);
//将td加入到tr中
tr.appendChild(td);
//将tr加入到tbody
tbody.appendChild(tr);
//根据table节点的id 找到table节点
var parNode = document.getElementById("hiddenTable");
//将新建立的tbody节点加入到table节点相应位置
parNode.appendChild(tbody);
}
}
</script>
</head>
<body>
<form name="addForm" method="post" action="">
<input name="str" type="text" id="inputStr" value="">
<input name="INSERT" type="button" id="insert" value="add" onclick="insertStr()">
<table id="hiddenTable">
</table>
</form>
</body>
</html>
