【JAVASCRIPT】无刷新评论

最新推荐文章于 2019-08-06 15:12:00 发布

weixin_33860147

最新推荐文章于 2019-08-06 15:12:00 发布

阅读量241

点赞数

文章标签： javascript ViewUI

本文介绍了一个简单的JavaScript评论系统实现过程，通过document.createElement创建元素，并利用innerText设置文本内容，最后使用appendChild将新创建的元素添加到指定位置。文章还提供了完整的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心技术：

　　 ①：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>