原生js实现一个简单的添加和删除评论功能

今天分享一个简单的添加和删除评论的小功能,非常简单,实际项目中也会稍微有用的上的,最重要的还是希望能够帮助大家打开思路。
全部过程代码全部在下面。首先咱们先分析下思路
1、获取内容和评论人的值
想要添加评论,必须要有值,对吧。首先要做的就是或者内容框和评论人框的文字,创建htm,l把获取的值写入到dom结构中。
//创建评论人Text节点
var person=document.createTextNode(form1.person.value);
//创建内容Text节点
var content=document.createTextNode(form1.content.value);
//创建Td和tr类型的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节点,并且把tbody添加到table节点
var mytable=document.getElementById("table2");
mytable.appendChild(tbody);
form1.person.value="";
form1.content.value="";
2、接下来就是删除这个非常简单。
说白了就是删除指定位置的html。
//删除第一条
function def(){
var mytable=document.getElementById("table2");
if(mytable.rows.length>1){
mytable.deleteRow(1);

};

};
//删除最后一条
function del(){
var mytable=document.getElementById("table2");
if(mytable.rows.length>1){

mytable.deleteRow(mytable.rows.length-1)
};

};
3、此方法还有一个重置功能,希望大家开动脑筋想想怎么做,提示:先判断是否已有评论,如果有点击重置按钮的时候就清楚所有。
如果没有就返回,很简单的,和我例子中有些代码类似的。

提示:你可以先修改部分代码再运行。

注:文中例子来源于,某js教程老师的例子,具体是叫啥,忘记了,如有侵权联系博主!