<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.onclick= 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>