JS---案例：无刷新评论---属于创建对象的案例拿出来复习

Posted 2021-03-20 jane_panyiyun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS---案例：无刷新评论---属于创建对象的案例拿出来复习相关的知识，希望对你有一定的参考价值。

案例：无刷新评论---属于创建对象的案例拿出来复习

创建行和单元格，添加到相应元素中，设置内容 createElement, appendChild,innerhtml

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <table id="tb" border="1">
    <tbody id="tbd">
      <tr>
        <td>猪猪:</td>
        <td>我喜欢吃肉</td>
      </tr>
    </tbody>
  </table>
  <div>
    昵称:<input type="text" value="" id="userName" /><br />
    <textarea name="" id="tt" cols="30" rows="10"></textarea><br />
    <input type="button" value="评论一下" id="btn" /><br />
  </div>
  <script src="common.js"></script>
  <script>
    //获取按钮，注册点击事件
    document.getElementById("btn").onclick = function () {
      //获取昵称
      var userName = my$("userName");
      //获取评论  
      var tt = my$("tt");
      //创建行
      var tr = document.createElement("tr");
      //行加到tbody中
      my$("tbd").appendChild(tr);
      //创建单元格td1,并添加到行
      var td1 = document.createElement("td");
      tr.appendChild(td1);
      td1.innerHTML = userName.value;
      //创建单元格td2,并添加到行
      var td2 = document.createElement("td");
      tr.appendChild(td2);
      td2.innerHTML = tt.value;
      //清空
      userName.value = "";
      tt.value = "";
    };
  </script>

</body>

</html>

以上是关于JS---案例：无刷新评论---属于创建对象的案例拿出来复习的主要内容，如果未能解决你的问题，请参考以下文章

G. 案例Ajax实现无刷新分页效果

js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）

js干货-Bom，Dom事件及各种案例

案例分析：设计模式与代码的结构特性