JavaScript应用DOM操作文档，实现添加评论和删除评论

最新推荐文章于 2022-09-09 10:43:07 发布
最新推荐文章于 2022-09-09 10:43:07 发布
阅读量545 收藏 5
点赞数 1
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21237549/article/details/104688039
版权

1.html内容如下

<html>
    <head>
        <title>发表评论</title>
        <link rel="stylesheet"href="CSS/style.css">
        <script language="javascript">
            function addElement(){
                var person=document.createTextNode(form1.person.value);
                var content=document.createTextNode(form1.content.value);
                var td_person=document.createElement("td");
                var td_content=document.createElement("td");
                var tr=document.createElement("tr");
                var tbody=document.createElement("tbody");
                td_person.appendChild(person);
                td_content.appendChild(content);
                tr.appendChild(td_person);
                tr.appendChild(td_content);
                tbody.appendChild(tr);
                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 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">&nbsp;人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</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">&nbsp;</td>
                    <td width="481">&nbsp;</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">&nbsp;</td>
                    <td><input name="Button"type="button"class="btn_grey"value="发表" onClick="addElement()">
                        &nbsp;
                        <input name="Reset" type="reset" class="btn_grey" value="重置">
                        &nbsp;
                        <input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick="deleteFirstE()">
                        &nbsp;
                        <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

style.css的内容：

<!--
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">

文件夹格式
在这里插入图片描述
最后效果如下：
可支持发表评论，增加评论，删除评论
在这里插入图片描述

滚雪球~
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用JavaScript实现发表、修改、删除评论
weixin_52163352的博客
12-12 4307
要用js实现这些功能，首先我们分析一下需要做什么 1.再文本框写评论 2.创建一个能储存写好的评论的地方，我们一般用无序列表li来储存 3.li不能让它固定，所以我们也需要用js来动态创建 4.肯定要在已经发布的评论哪里删除，也就是说，再创建的li中在创建两个按钮 那么大致的html就只需要创建一个文本框和一个发表评论的按钮就够了，为了方便，ul也可以先创建好： <div class="bigBox w"> <textarea name="" id="txt" cols="
简易留言板
qq_40687516的博客
12-21 521
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
DOM实现发表评论
qq_48294048的博客
10-04 169
html: <input type="text"><button>发表</button> <ul></ul> javascript: <script> /* 点击发表将输入框的内容添加到ul的第一个子节点 */ // 获取元素 inp btn ul var inp = document.querySelector('input'
JS+DOM实现简单的评论及删除功能
最新发布
weixin_45341560的博客
09-09 319
需求： 通过DOM实现评论的效果 布局只能有一个div,其余创建生成 实现发布，删除，最新发布在最前面
JavaScript# DOM实现留言板
cathei的博客
07-18 1766
        &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         .wrap{   
JavaScript利用HTML DOM进行文档操作的方法
10-22
无论是在网页中动态地添加内容，还是更新页面的样式和结构，JavaScript都通过DOM操作实现了与HTML或XML文档的交互。掌握DOM操作的知识对于前端开发者而言是不可或缺的技能，有助于我们编写出更加丰富和动态的网页...
JavaScript基于DOM操作实现简单的数学运算功能示例
10-20
在JavaScript中，我们可以利用DOM API来获取、修改、添加或删除页面元素。在这个例子中，`getElementById`方法用于获取具有特定ID的元素，`getElementsByName`用于获取一组具有相同名称的元素。 2. **节点操作**：...
JQuery实现动态添加删除评论的方法
10-24
JQuery实现动态添加删除评论的方法涉及到了使用JQuery处理鼠标事件，以及通过json数据动态更新页面内容的技术。 首先，提到的JQuery是一个快速、小巧且功能丰富的JavaScript库。它通过简化HTML文档遍历和操作、事件...
JavaScript和DOM操作
02-17
在“JavaScript和DOM操作”这个主题中，我们将深入探讨如何利用JavaScript来动态地改变、添加和删除网页内容。 DOM（Document Object Model）是HTML和XML文档的结构化表示，它将网页内容转化为一个树形结构，允许...
javascript无刷新评论实现方法
10-24
总的来说，实现无刷新评论的核心在于使用JavaScript动态操作DOM，通过获取用户输入、创建新元素并将其插入到适当位置，实现评论的即时显示。这种技术在现代Web应用中非常常见，不仅可以用于评论系统，还可以应用于...
vue.js实现用户评论、登录、注册、及修改信息功能
10-19
主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html页面中加入评论功能,JavaScript实现简单评论功能
weixin_35747299的博客
05-31 5603
本文实例为大家分享了JavaScript实现简单评论功能的具体代码，供大家参考，具体内容如下body{/*background-image: url(../img/91R58PIC3n2_1024.jpg);*/}#div1{margin: auto;border: 1px beige solid;width: 512px;text-align: right;}ul{list-style-type...
js实现简易的评论留言功能
yang68668的博客
11-05 3395
<style> * { margin: 0; padding: 0; } li { list-style: none; width: 500px; height: 30px; line-height: 30px; background-color: cadetbl.
dom实现类似淘宝的星级评分
minjiayanm的博客
12-14 201
星级评分本质上是两种星星图片之间的转换。 代码如下（五角星(1).png是指空白五角星图，五角星.png是指选中的五角星图）： <div class="wrap"> <div class="score"> <img src="五角星(1).png" alt=""> <img src="五角星(1).png" ...
利用DOM进行评论的发表与删除
于先森
05-27 592
function addElement() { //创建代表评论人的TextNode节点 var person = document.createTextNode(form1.person.value); //创建代表评论内容的TextNode节点 var centent = document.createTextNode(form1.content.value); //创建t
添加和删除评论功能网页的实现
Megustas_JJC的博客
10-19 3459
DOM是Document Object Model（文本对象模型）的简称，是表示文档和访问操作构成文档的各种元素的应用程序接口（API）。它提供了文档中独立元素的结构化、面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容。DOM也提供了处理事件的接口，它允许捕获和响应用户以及浏览器的动作。 接下来通过结合HTM
Jscript Sy04 Dom实现 留言板或评论区功能
Beyond_Nothing
05-10 622
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>评论区</title> <script type="text/javascript"> onload = function () { function getMsgDate()//得到当前日期 {
JavaScript基础语法及DOM简单操作
m0_63348818的博客
01-16 246
一.js简单语法 js严格区分大小写,要注意. Js中每一条语句以分号结尾. 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源. 而且有些时候,浏览器为加错分号,所以在开发中分号必须写 js中会忽略多个空格和换行,所以可以利用进行格式化. Js基本输出语句 alert(“”); 弹出一个警告框. ducoment.write(““); 在body里显示. Console.log(“”); 在控制台显示. Prompt(‘’); 弹出一个文本框. 二.变量 在js中 声明变量用var
JS中操作DOM文档
孤云博客
02-14 1158
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) 在前面示例中演示了使用DOM技术遍历文档，在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。这些操作都是通过节点(Node)对象提供的方法来完成。Node对象的常用方法如下： ...
JavaScript操作DOM：添加、删除、插入与替换节点
"本资源主要涵盖了JavaScript中的DOM操作，包括添加、插入、删除和替换节点的基本方法，以及变量的声明和赋值规则。此外，还提到了JavaScript在HTML中的引入方式以及常见的变量命名规范。" 在JavaScript中，DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值