<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside{
width: 1000px;
margin: 0 auto;
border: 1px solid #E7EAEE;
overflow: hidden;
padding-bottom: 15px;
} #outside h3{
width: 95%;
margin: 15px auto;
padding-bottom: 10px;
border-bottom: 1px solid #E7EAEE;
font-family: "宋体",sans-serif;
} #outside .comment1{
width: 95%;
margin: 10px auto;
color: #BBBBBB;
font-size: 12px;
border-bottom: 1px dashed #E7EAEE;
font-family: "宋体",sans-serif;
} #outside time{
float: right;
} #outside .comment1 span{
color: #5979B2;
margin-left: 5px;
font-weight: bold;
} #outside .comment1 p{
font-size: 16px;
color: black;
} #outside h4{
width: 95%;
margin: 15px auto;
color: #404E73;
font-size: 16px;
font-weight: bold;
font-family: "宋体",sans-serif;
} #outside #addComment{
width: 95%;
margin: 0 auto;
font-size: 12px;
color: #BBBBBB;
} #outside #name{
width: 200px;
border: 1px solid #D9E2EF;
} #outside #comContent{
width: 800px;
height: 100px;
resize: none;
border: 1px solid #D9E2EF;
vertical-align: text-top;
} #outside button{
width: 100px;
height: 30px;
background-color: #2D46A3;
color: white;
border: hidden;
float: right;
margin: 15px 100px;
}
</style>
</head> <body> <div id="outside">
<h3>最新平均</h3> <div id="comment">
<div id="comment1" class="comment1">
腾讯网友
<span>李二狗</span>
<time>2010年10月5日 19:21:12</time>
<p>
公务员好啊!可以为人民服务!
</p>
</div>
</div> <h4>发表评论</h4> <div id="addComment">
昵&nbsp;&nbsp;&nbsp;&nbsp;称:<input type="text" id="name" />
<br /><br />
评论内容:<textarea id="comContent"></textarea>
<button onclick="addComment()">提交评论</button>
</div>
</div> </body> <script type="text/javascript">
var idNum = 1;
function addComment(){
idNum++;
       //获取input中用户新输入的昵称和评论内容
var inputValue = document.getElementById("name").value;
var textValue = document.getElementById("comContent").value;
//判断是否为空
if(inputValue==""||textValue==""){
alert("昵称和评论内容不能为空!!");
return;
}
//获取已有评论的ID
var comContent1 = document.getElementById("comment1");
       //克隆已有评论的节点,true为包含子节点
var newComment = comContent1.cloneNode(true);
       //给新克隆的评论设置新的ID
newComment.setAttribute("id","comment"+idNum);
       //在标签内赋入新的昵称和评论内容
newComment.getElementsByTagName("span")[0].innerText = inputValue;
newComment.getElementsByTagName("p")[0].innerText = textValue; //将新克隆并新赋值的评论加到原有评论的后面
var commentDiv = document.getElementById("comment");
commentDiv.appendChild(newComment); document.getElementById("name").value = "";
document.getElementById("comContent").value = ""; } </script> </html>

上述代码有一个缺陷,即时间无法更新,之后再来补充修改。基本效果图如下:

评论前:

评论后:

原生JS实现简易评论更新功能的更多相关文章

  1. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  4. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  5. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  6. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 原生JS制作简易Tabs组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. RabbitMQ消息模型概览(简明教程)

    小菜最近用到RabbitMQ,由于之前了解过其他消息中间件,算是有些基础,所以随手从网上搜了几篇文章,准备大概了解下RabbitMQ的消息模型,没想到网上文章千篇一律,写一大堆内容,就是说不明白到底怎 ...

  2. SQL AVG 函数

    定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...

  3. Codeforces #541 (Div2) - D. Gourmet choice(拓扑排序+并查集)

    Problem   Codeforces #541 (Div2) - D. Gourmet choice Time Limit: 2000 mSec Problem Description Input ...

  4. hbuilder IOS APP 打包与发布

    ---恢复内容开始--- 准备:苹果开发者账号,一个Mac系统 没有账号可以再这里注册 https://developer.apple.com/ 因为账号是公司的,自己并没有注册过,这里就不进行阐述了 ...

  5. [原创]一种专门用于前后端分离的web服务器(JerryServer)

    如果你还不了解现在的前后端分离,推荐阅读淘宝前端团队的前后端分离的思考与实践 1.问题 随着现在整个软件开发行业的发展,在开发模式上逐渐由以前的一个人完成服务端和前端web页面,演变为前端和后端逐渐分 ...

  6. random使用方法

    random.random() 没有参数,选择0到1之间的随机浮点数 random.uniform(a, b) 生成指定范围内的随机浮点数如果a.b哪个大那个小都没关系,生成的都是在小的与大的之间的随 ...

  7. 周末学习笔记——day02(带参装饰器,wraps修改文档注释,三元表达式,列表字典推导式,迭代器,生成器,枚举对象,递归)

    一,复习 ''' 1.函数的参数:实参与形参 形参:定义函数()中出现的参数 实参:调用函数()中出现的参数 形参拿到实参的值,如果整体赋值(自己改变存放值的地址),实参不会改变,(可变类型)如果修改 ...

  8. 《为大量出现的KPI流快速部署异常检测模型》 笔记

    以下我为这篇<Rapid Deployment of Anomaly Detection Models for Large Number of Emerging KPI Streams>做 ...

  9. Docker 核心技术之仓库

    Docker 仓库简介 什么是Docker仓库 Docker仓库就是存放docker镜像并有docker pull方法下载的云环境 Docker仓库分为公有仓库和私有仓库. 公有仓库指Docker H ...

  10. yolov3和darknet opencv版编译安装及基本测试

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 一.准备工作: 安装pkg-config:sudo apt-get install pkg-confi ...