<html>
<head>
<title>DOM-动态添加和删除元素</title>
<style type="text/css">
body,td,caption,input{
font-size:12px;
}
</style>
<script language="javascript">
var count =0;
//添加新用户的操作
function addNewUser(){
//得到文本框对象
var objName = document.getElementById('name');
if(objName.value==""){
alert("用户名不能为空!");
objName.focus();
return;
}else{
count++;
//先创建行tr
var row = document.createElement("tr");
//设置行对象的ID属性为用户输入的用户名称
row.setAttribute("id",objName.value+count);
//创建td对象
var column = document.createElement("td");
//td对象下添加子节点 - 内容 TextNode 对象
column.appendChild(document.createTextNode(objName.value));
//row对象将td对象添加为子节点对象
row.appendChild(column);
//再创建删除按钮
var delBtn = document.createElement("input");
//类型
delBtn.setAttribute("type","button");
//文本
delBtn.setAttribute("value","Delete");
//设置对象的事件处理 - 所调用的函数
var name = objName.value+count;
delBtn.οnclick= function(){delUser(name);};
column = document.createElement("td");
column.appendChild(delBtn);
//行对象添加
row.appendChild(column);
//添加这一行到tbody中
document.getElementById('userList').appendChild(row);
objName.value="";
}
}
//删除元素
function delUser(name){
if(name!=null){
var objRow = document.getElementById(name);
var objTBODY = document.getElementById("userList");
//删除
objTBODY.removeChild(objRow);
}
}
</script>
</head>
<body>
<table align="center" width="40%" border="1" cellspacing="0">
<caption align="center">动态添加用户</caption>
<tr>
<td>添加新的用户名</td>
<td>
<input type="text" id="name"> <input type="button" value="添 加" onClick="addNewUser()">
</td>
</tr>
<tr>
<td colspan="2">用户信息</td>
</tr>
<!--表格主体-->
<tbody id="userList"></tbody>
</table>
</body>
</html>
第二、操作实例
<html>
<head>
<title>DOM 文档</title>
<script language="javascript">
//加载数据
function loadDatas(){
//创建一个H3对象
var h3 = document.createElement("h3");
//设置属性 对齐方式
h3.setAttribute("align","center");
//H3文本对象
var h3Text = document.createTextNode("DOM Document Object Model");
h3.appendChild(h3Text);
//添加至body对象中
document.body.appendChild(h3);
//创建HR水平线
var hr = document.createElement("hr");
document.body.appendChild(hr);
//创建表格对象
var table = document.createElement("table");
table.setAttribute("align","center");
table.setAttribute("width","50%");
table.setAttribute("border",1);
//添加至body对象中
document.body.appendChild(table);
//表格对象添加caption对象
var caption = table.createCaption();
caption.appendChild(document.createTextNode("Student Infomation"));
//创建列标题对象
var head = table.createTHead();
//列标题行
var headRow = head.insertRow(0);
headRow.setAttribute("align","center");
headRow.setAttribute("bgColor","#bbbddd");
//列标题行对象 创建单元格对象
var firstCell = headRow.insertCell(0);
firstCell.appendChild(document.createTextNode("ID"));
//等价于
headRow.insertCell(1).appendChild(document.createTextNode("NAME"));
headRow.insertCell(2).appendChild(document.createTextNode("Grade"));
headRow.insertCell(3).appendChild(document.createTextNode("Class"));
var firstRow = table.createTHead();
var row1 = firstRow.insertRow(1);
row1.insertCell(0).appendChild(document.createTextNode("1001"));
row1.insertCell(1).appendChild(document.createTextNode("张 三"));
row1.insertCell(2).appendChild(document.createTextNode("S2"));
row1.insertCell(3).appendChild(document.createTextNode("T203"));
var secondRow = table.createTHead();
var row2 = secondRow.insertRow(2);
row2.insertCell(0).appendChild(document.createTextNode("1002"));
row2.insertCell(1).appendChild(document.createTextNode("李 四"));
row2.insertCell(2).appendChild(document.createTextNode("S1"));
row2.insertCell(3).appendChild(document.createTextNode("T107"));
var thirdRow = table.createTHead();
var row3 = firstRow.insertRow(3);
row3.insertCell(0).appendChild(document.createTextNode("1003"));
row3.insertCell(1).appendChild(document.createTextNode("王 五"));
row3.insertCell(2).appendChild(document.createTextNode("Y2"));
row3.insertCell(3).appendChild(document.createTextNode("T316"));
}
</script>
</head>
<body onLoad="loadDatas()">
</body>
</html>