<!DOCTYPE html><html><head><title>发表评论</title><link rel="stylesheet" href="CSS/style.css"><script language="javascript">//用于在评论列表中添加一条评论信息,还有清空评论人和评论内容文本框function addElement() {//创建显示评论人的文本节点TextNodevar person1 = document.createTextNode(form1.person.value);//创建显示评论内容的文本节点TextNodevar content1 = document.createTextNode(form1.content.value);//创建td类型 ?的 ?Element节点var td_person1 = document.createElement("td");var td_content1 = document.createElement("td");//创建一个tr类型 的 ??Elements节点var tr = document.createElement("tr");//创建一个tbody类型 的 Element节点var tbody = document.createElement("tbody");//将TextNode节点加入到td类型的节点td_person1.appendChild(person1);td_content1.appendChild(content1);//将td类型的节点加入到tr类型的节点tr.appendChild(td_person1);tr.appendChild(td_content1);//将tr类型的节点加入到tbody类型的节点tbody.appendChild(tr);//获取table对象 ??的 ?Id=commentvar tComment = document.getElementById("comment");//将tbody节点 ???加入上一个table节点的后面tComment.appendChild(tbody);form1.person.value = "";form1.content.value = "";}//用于将评论列表中的第一条评论信息删除,function deleteFristE() {//获取table对象 ??的 ?Id=commentvar dComment = document.getElementById("comment");//如果获取的对象超过了两行,则删除第二行if (dComment.rows.length > 1) {//删除第二行dComment.deleteRow(1);}}//用于将评论列表中的最后一条评论信息删除,function deleteLastE() {//获取table对象 ??的 ?Id=commentvar lComment = document.getElementById("comment");//如果获取的对象超过了两行,则删除第二行if (lComment.rows.length > 1) {//删除第二行lComment.deleteRow(lComment.rows.length - 1);}}</script></head><body><table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933" bordercolordark="#FFFFFF" bgcolor="#666666"><thead><tr><td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td><td width="86%" align="left" bgcolor="#FFFFFF"> 人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</td></tr></thead></table><br><table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment"><tr><td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td><td width="82%" align="center" bgcolor="#E5BB93">评论内容</td></tr></table><!-- ---------------------------------------------------------------------><form name="form1" method="post" action=""><table width="600" height="122" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="119" height="14"> </td><td width="481"> </td></tr><tr><td height="27" align="center">评 论 人：</td><td><input name="person" type="text" id="person" size="40"></td></tr><tr><td align="center">评论内容：</td><td><textarea name="content" cols="60" rows="6" id="content"></textarea></td></tr><tr><td height="40"> </td><td><input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()"> <input name="Reset" type="reset" class="btn_grey" value="重置"> <input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick=" deleteFristE()"> <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()"></td></tr></table></form></body></html>
<!--body{ ???FONT-SIZE: 9pt; ???margin-left:0px; ???SCROLLBAR-FACE-COLOR: #E5BB93; ????SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; ???SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000; ???SCROLLBAR-3DLIGHT-COLOR: #ececec; ???SCROLLBAR-ARROW-COLOR: #ffffff; ???SCROLLBAR-TRACK-COLOR: #ececec; ???SCROLLBAR-DARKSHADOW-COLOR: #999966; ???BACKGROUND-COLOR: #fcfcfc}a:hover { ???font-size: 9pt; color: #FF6600;}a { ???font-size: 9pt; text-decoration: none; ?color: #676767; ???noline:expression(this.onfocus=this.blur);}td{ ???font-size: 9pt; color: #000000; ???padding:5px;}.btn_grey { ???font-family: "宋体"; ?font-size: 9pt;color: #333333; ?????background-color: #eeeeee;cursor: hand;padding:1px;height:19px; ???border-top: 1px solid #FFFFFF;border-right:1px solid #666666; ???border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;}input{ ???font-family: "宋体"; ???font-size: 9pt; ???color: #333333; ???border: 1px solid #999999;}hr{ ???border-style:solid; ???height:1px; ???color:#CCCCCC;}--><meta http-equiv="Content-Type" content="text/html; charset=GBK">
JS ?DOM 实现删除和添加的功能
原文地址：https://www.cnblogs.com/zxrxzw/p/10353075.html