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

创建行和单元格，添加到相应元素中，设置内容 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. 使用vue-cli3快速适配H5项目

    跟我老大学到了一招使用vue-cli3快速适配H5项目的方法. 我之前也有进行一个版本的适配,直接使用cnpm install -g vue-cli,然后安装各种插件进行适配,见我之前的博客. 后来老 ...

  2. thinkphp 数据写入

    直线电机优势 ThinkPHP的数据写入操作使用add方法,使用示例如下: $User = M("User"); // 实例化User对象 $data['name'] = 'Thi ...

  3. 思维构造，建图——cf1159E

    很好的题 /* nexti:pi右边第一个比pi大的数的下标 把每个[i,a[i]]都看成一段区间,区间只能在端点处交叉,以此来判断是否有解 特别的,如果a[i]=-1,那么把a[i]=i+1,不对其 ...

  4. Java-slf4j：sfl4j

    ylbtech-Java-slf4j:sfl4j 1.返回顶部 1. SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种 ...

  5. 浅谈response和request方法

    一:概述 Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. 按这个理解的话一次请求生成一个request和res ...

  6. PAT甲级——A1087 All Roads Lead to Rome【30】

    Indeed there are many different tourist routes from our city to Rome. You are supposed to find your ...

  7. python学习笔记4.2_正则表达式

    常用正则表达式:http://tool.chinaz.com/regex/ 1.正则表达式:提供了一种在文本中灵活查找或匹配字符串模式的方法.单个表达式通常被称为regex. 2.python的re模 ...

  8. VRRP概述-转

    本文介绍了VRRP的基本原理.特点和应用. VRRP概述 随着Internet的发展,人们对网络的可靠性的要求越来越高.对于局域网用户来说,能够时刻与外部网络保持联系是非常重要的. 通常情况下,内部网 ...

  9. CAS去掉HTTPS认证

    如何去掉HTTPS认证? 说明:默认情况下HTTP也是可以访问CAS SERVER的,但认证,登陆,退出等操作均没有任何的效果.所以必须作出下面的修改 1.进入WEB-INF\spring-confi ...

  10. jqGrid的subGrid子表格

    使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...