zoukankan      html  css  js  c++  java
  • 【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>
  • 相关阅读:
    c# – 通过反射获取命名空间中的所有类型
    宝塔任务计划通道设置
    DRF项目框架基础设计
    Redis-数据特征和应用场景
    Redis-持久化详解
    Dockerfile文件详解
    ntp同步阿里服务器时间(centos)
    NUC8/11更新EC Firmware
    ambarella H2 kernel调试记录
    MobaXterm 执行make menuconfig不能删除字符
  • 原文地址:https://www.cnblogs.com/ngnetboy/p/2623599.html
Copyright © 2011-2022 走看看