在DOM中不仅可以通过节点的属性查询节点,还可以对节点进行创建、插入、删除和替换等操作。
<!DOCTYPE html>
<html>
<head>
<title>DOM.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
function addElement(){
//创建评论人和评论的TextNode节点
var person = document.createTextNode(form1.person.value);
var content = document.createTextNode(form1.content.value);
//创建td类型的Element节点
var td_person = document.createElement("td");
var td_content = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
//将TextNode添加到td类型的节点中
td_person.appendChild(person);
td_content.appendChild(content);
//将td类型节点添加到tr类型的节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);
//获取table对象
var tComment = document.getElementById("comment");
tComment.appendChild(tbody);
form1.person.value="";
form1.content.value="";
}
//删除第一条
function deleteFirstE(){
var tComment = document.getElementById("comment");
if(tComment.rows.length>1){
tComment.deleteRow(1);
}
}
function deleteLastE(){
var tComment = document.getElementById("comment");
if(tComment.rows.length>1){
tComment.deleteRow(tComment.rows.length-1);
}
}
</script>
</head>
<body>
<table id="comment" width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF">
<tr>
<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
<td width="18%" align="center" bgcolor="#E5BB93">评论内容</td>
</tr>
</table>
<form name="form1" method="post" action="">
评论人:<input name="person" type="text" id="person" size="40" />
评论内容:<input name="content" cols="60" rows="6" id="content" />
<br/>
<input type="button" value="发表" οnclick="addElement()" />
<input type="button" value="删除第一条评论" οnclick="deleteFirstE()" />
<input type="button" value="删除最后一条评论" οnclick="deleteLastE()" />
</form>
</body>
</html>