染数据的方法

  1)、字符串拼接,  最常用的方法

      优点:只进行一次dom回流

      缺点:原有dom的事件都会丢失

      原因:就在于innerHTML这个属性,这个属性是返回或设置dom中的内容,以字符串形式返回,拼接完之后是string类型,而一些事件属性是dom元素对象身上的,所以这些那些事件属性就会丢失。

  2)、dom循环

      优点:原有的dom身上的事件不会丢失,不影响其他dom

      缺点:dom回流次数过多,严重影响网页性能

  3)、模板

      模板的本质就是字符串拼接

  4)、文档碎片

      document.createDocumentFragement

      优点:既不影响原有的dom属性,也只回流一次

  上面的四种方法对新增的元素都没有之前的事件,如果保证新增的元素也拥有之前的事件,就用事件委托。

ajax如何渲染数据的更多相关文章

  1. datatables通过ajax调用渲染数据,怎么根据数据给td添加class

    html: <table id="table8" cellpadding="0" cellspacing="0" border=&qu ...

  2. Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上

    页面dom结构如下 <ul class="user" id="app"> <li><span>姓名: </span&g ...

  3. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  4. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  5. Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器

    MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

  6. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

  7. Thinkphp3.2.3使用Ajax一定注意 数据返回

    Thinkphp3.2.3使用Ajax一定注意 数据返回 $data = 'ok'; $this->ajaxReturn($data); 不能直接 echo $data;

  8. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  9. js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

随机推荐

  1. 弹筐里同一个按钮判断是从哪里点击过来的form

    点击弹框按钮 <form action="javascript:;" method="post">         <button type= ...

  2. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  3. 使用shiro的密码服务模块

    http://jinnianshilongnian.iteye.com/blog/2021439 http://www.cnblogs.com/snidget/p/3817763.html

  4. Android中控件之间添加分割线

    将以下view标签放置在需要分割的两个控件之间: <View android:layout_width=”match_parent” android:layout_height=”1dp” an ...

  5. PHP的openssl_encrypt方法的Java实现

    <?php class OpenSSL3DES { /*密钥,22个字符*/ const KEY='09bd821d3e764f44899a9dc6'; /*向量,8个或10个字符*/ cons ...

  6. java Comparable and Comparator

    1.Comparable简介 此接口对实现它的每个类的对象强加一个总排序.这种排序被称为类的自然排序,类的compareTo方法被称为其自然比较方法.可以通过 Collections.sort(和Ar ...

  7. 回文的范围——算法面试刷题2(for google),考察前缀和

    如果一个正整数的十进制表示(没有前导零)是一个回文字符串(一个前后读取相同的字符串),那么它就是回文.例如,数字5, 77, 363, 4884, 11111, 12121和349943都是回文. 如 ...

  8. RPA简介

    开篇: 公司正在全面推广RPA,正好借此机会学习一下,发现国内对RPA的了解较少,萌生了在博客园开博,同时锻炼一下自己的输出能力,纯笔记,如有不足之处,请指正,共勉. 阅读目录: 1. 什么是RPA ...

  9. 新建项目找不到android studio:appcompat v7:27.+包。

    1.我们在build.gradle(project)中添加maven中的google库: allprojects { repositories { jcenter() maven { url &quo ...

  10. Android 音视频深入 二十 FFmpeg视频压缩(附源码下载)

    项目源码https://github.com/979451341/FFmpegCompress 这个视频压缩是通过类似在mac终端上输入FFmpeg命令来完成,意思是我们需要在Android上达到能够 ...