当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JS---案例:无刷新评论---属于创建对象的案例拿出来复习

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

2019年12月26日  | 移动技术网IT编程  | 我要评论

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

创建行和单元格,添加到相应元素中,设置内容 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>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网