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

创建行和单元格，添加到相应元素中，设置内容 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---案例：无刷新评论---属于创建对象的案例拿出来复习的更多相关文章

  1. jQuery 无刷新评论

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  3. 纯js异步无刷新请求(只支持IE)【原】

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  4. ajax无刷新评论示例

    下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容 ...

  5. js实现无刷新表单提交文件，将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  6. history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery）

    示例: http://browserstate.github.io/history.js/demo/     简介   HTML4有一些对浏览历史的前进后退API的支持如:   window.hist ...

  7. js实现无刷新上传

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...

  8. 案例(JQuery的ajax无刷新评论)

    CommentsTest.html代码: <head> <meta http-equiv="Content-Type" content="text/ht ...

  9. Ajax制作无刷新评论系统

    index.html <script src="jquery.min.js"></script> <script> $(function(){ ...

随机推荐

  1. unordered_map

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  2. ThinkPHP实现了ActiveRecords模式的ORM模型

    ThinkPHP实现了ActiveRecords模式的ORM模型,采用了非标准的ORM模型:表映射到类,记录映射到对象.最大的特点就是使用方便和便于理解(因为采用了对象化),提供了开发的最佳体验,从而 ...

  3. 容斥原理——hdu3208

    和hdu2204有点像 这题要特别注意精度问题,如pow的精度需要自己搞一下,然后最大的longlong可以设为1<<31 /* 只要求[1,n]范围内的sum即可 那么先枚举幂次k[1, ...

  4. 深入浅出 Java Concurrency (26): 并发容器 part 11 Exchanger[转]

    可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹配,并且在返回时接收其伙伴的对象.Exchanger 可能被视为 Synchro ...

  5. Hibernate关联映射（一对多/多对多）

    版权声明:翀版 https://blog.csdn.net/biggerchong/article/details/843401053.  Hibernate关联映射上接Hibernate持久化类:h ...

  6. Hack Tools

    Tools 2011-03-17 13:54:36|  分类: Security|举报|字号 订阅     Packet Shaper:Nemesis: a command line packet s ...

  7. #iOS问题记录# 频繁触发viewDidLayoutSubviews的问题

    问题描述: 最近使用给Flutter团队写view组件的时候,出现了触发Widget的频繁build的问题. 问题排查: Flutter的同事提到在flutter层,是因为 updateViewpor ...

  8. PHP 类与对象 全解析方法

    1.类与对象 对象:实际存在该类事物中每个实物的个体.$a =new User(); 实例化后的$a 引用�php的别名,两个不同的变量名字指向相同的内容 封装: 把对象的属性和方法组织在一个类(逻辑 ...

  9. walle(瓦力)部署系统的安装和简单使用

    Walle(瓦力):一套软件开发的部署系统.提供了清晰的日志记录,支持数据的回滚.用于解决大型团队在软件开发中的测试.预测试和上线的统一部署管理. 系统环境:CentOS6.8-A CentOS-6. ...

  10. Python 编码转换与中文处理

    python 中的 unicode是让人很困惑.比较难以理解的问题. 这篇文章 写的比较好,utf-8是 unicode的一种实现方式,unicode.gbk.gb2312是编码字符集. py文件中的 ...