DOM操作html浅例--createElement、createTextNode
仿作的一个简单的例子，供和我一样的初学者参考,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript实现动态的效果</title>
<script type="text/javascript">
function addSort(){
var name = document.getElementById("name").value;
if(name==""){
return;
}
var row=document.createElement("tr");
//创建文本
row.setAttribute("id",name);
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
cell=document.createElement("td");
var deleteButton=document.createElement("input");//创建按钮
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删除");
deleteButton.onclick=function doDelete(){deleteSort(name);}
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
document.getElementById("name").value="";
}
//删除一条记录的函数
function deleteSort(id){
var row = document.getElementById(id);
document.getElementById("sortList").removeChild(row);
}
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td colspan="2" bgcolor="#C0DCC0" align="center">用户信息管理</td>
</tr>
<tr>
<td>添加用户:</td>
<td><input type="text" id="name"> <input type="button" onclick="addSort();" value="确认添加"></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td height="20" valign="top" align="center">用户名称</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript实现动态的效果</title>
<script type="text/javascript">
function addSort(){
var name = document.getElementById("name").value;
if(name==""){
return;
}
var row=document.createElement("tr");
//创建文本
row.setAttribute("id",name);
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
cell=document.createElement("td");
var deleteButton=document.createElement("input");//创建按钮
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删除");
deleteButton.onclick=function doDelete(){deleteSort(name);}
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
document.getElementById("name").value="";
}
//删除一条记录的函数
function deleteSort(id){
var row = document.getElementById(id);
document.getElementById("sortList").removeChild(row);
}
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td colspan="2" bgcolor="#C0DCC0" align="center">用户信息管理</td>
</tr>
<tr>
<td>添加用户:</td>
<td><input type="text" id="name"> <input type="button" onclick="addSort();" value="确认添加"></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td height="20" valign="top" align="center">用户名称</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</td>
</tr>
</table>
</body>
</html>