html 有添加和删除功能,JS DOM 实现删除和添加的功能

发表评论

//用于在评论列表中添加一条评论信息,还有清空评论人和评论内容文本框

function addElement() {

//创建显示评论人的文本节点TextNode

var person1 = document.createTextNode(form1.person.value);

//创建显示评论内容的文本节点TextNode

var 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=comment

var tComment = document.getElementById("comment");

//将tbody节点 加入上一个table节点的后面

tComment.appendChild(tbody);

form1.person.value = "";

form1.content.value = "";

}

//用于将评论列表中的第一条评论信息删除,

function deleteFristE() {

//获取table对象 的 Id=comment

var dComment = document.getElementById("comment");

//如果获取的对象超过了两行,则删除第二行

if (dComment.rows.length > 1) {

//删除第二行

dComment.deleteRow(1);

}

}

//用于将评论列表中的最后一条评论信息删除,

function deleteLastE() {

//获取table对象 的 Id=comment

var lComment = document.getElementById("comment");

//如果获取的对象超过了两行,则删除第二行

if (lComment.rows.length > 1) {

//删除第二行

lComment.deleteRow(lComment.rows.length - 1);

}

}

bordercolordark="#FFFFFF" bgcolor="#666666">

 人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……

bordercolordark="#FFFFFF" id="comment">

评论人评论内容

评 论 人：
评论内容：

标签：DOM,tr,JS,添加,评论,var,td,document,节点

来源： https://www.cnblogs.com/zxrxzw/p/10353075.html