【JAVASCRIPT】无刷新评论

核心技术:

    ①: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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值