核心技术：

　　 ①：document.createElement("")　---创建一个新元素

　　②：innerText　　　　---设置元素的text属性　（innerText会把元素之前的text覆盖掉，需谨慎使用）　　　　　

　　 ③：appendChild　　　　-----把元素绑定到父节点

　　界面设计如图：

　　界面代码如下：

 1     <p>评论列表：</p>
 2     <table id="tablepinglun">
 3         <tr>
 4             <td>小刚说：</td>
 5             <td>我是凹凸曼。</td>
 6         </tr>
 7     </table>
 8      <p> 昵称：<input type="text" id="username" /></p>
 9      <p> 评论内容：<textarea id="content" cols="20" rows="2"></textarea></p>
10      <p><input type="button" value="提交" onclick="addpinglun()" /></p>

　　js代码如下：

 1     <script type="text/javascript">
 2         function addpinglun() {
 3             var user = document.getElementById("username");     //得到用户名框的值
 4             var content = document.getElementById("content");   //得到内容
 5             var tr = document.createElement("tr");      //创建一个tr
 6
 7             var td1 = document.createElement("td");     //创建第一个td为了显示用户名
 8             td1.innerText = user.value + "说：";
 9             tr.appendChild(td1);            //把td添加到tr节点上
10
11             var td2 = document.createElement("td");
12             td2.innerText = content.value;
13             tr.appendChild(td2);
14
15             var tablemain = document.getElementById("tablepinglun");       //获取table
16             tablemain.appendChild(tr);          //把tr添加到table节点上
17
18             user.value = "";        //当评论完成，把昵称和内容只用，防止重复评论
19             content.value = "";
20
21         }
22     </script>

转载于:https://www.cnblogs.com/ngnetboy/archive/2012/08/05/2623599.html

【JAVASCRIPT】无刷新评论相关推荐

ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
ajax无刷新评论的思路,ajax学习——ajax版无刷新评论（数据库）
//Comment.htm 无刷新评论 type="text/javascript"> //加载评论 $(function() { $.post("GetComme ...
ajax无刷新评论示例
下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面留言内容中为空,或者为灰色的"没有填 ...
AJAX+JavaScript无刷新检查用户名
AJAX+JavaScript无刷新检查用户名是否可用2009-04-20 16:26 JavaScript 和 Ajax 代码 <script language="javascr ...
wordpressPHP实现ajax评论,wordpress无刷新评论：无需插件ajax实现wordpress comment无刷新机制...
/** * 这个文件是从根目录下拷贝过来的comment-posts.php文件,主要功能就是提交评论,同时增加了显示出结果的功能. */ if ( 'POST' != $_SERVER['REQUE ...
emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
首先建立数据库,数据关系图如下: 本文要实现的效果就是在评论别人文章时,如果文章内容过长或者评论内容过长,实现的一个评论分段延迟加载的效果,即每页可显示30条评论,可每隔10条延迟加载一次以提高网页传 ...
tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存
以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...
html网页无刷新数据更新,使用javascript怎么实现页面无刷新更新数据
使用javascript怎么实现页面无刷新更新数据发布时间:2021-03-18 17:22:21 来源:亿速云阅读:71 作者:Leah 这篇文章给大家介绍使用javascript怎么实现页面无 ...

【JAVASCRIPT】无刷新评论

核心技术：

【JAVASCRIPT】无刷新评论相关推荐

最新文章

热门文章