染数据的方法

  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. Python用上锁和解锁 lock lock.acquire lock.release 模拟抢火车票

    Python用上锁和解锁  lock lock.acquire lock.release 模拟抢火车票 import jsonimport timefrom multiprocessing impor ...

  2. JavaScript进阶系列1:performace和console.time性能测试

    测试性能的时候,三种方法: 1.使用new Date() 返回整数值ms var dtStart=new Date(); for(var i=0;i<15000;i++){ i=i; } var ...

  3. ArcGIS中KML转为shp文件

    问题:如何将KML转为shp文件? 方法: 1.打开ArcMap -> ArcToolbox: 2.在ArcToolbox中选择“转换工具”-> “由KML转出” -> “KML转图 ...

  4. 此博客不再更新和分享UiPath文章

    由于版权问题,将不再分享我的笔记 警告:任何人不得拷贝及挪用我的uipath笔记作为商业用途,一旦发现,立刻发律师函,请知悉及慎重!!!!

  5. Vue项目本地run与build后样式不同,build后样式不生效

    今天老大,让我改一个按钮的样式,就是鼠标放在按钮上,改变字体的颜色.觉得小意思啦,不就是:hover吗? 啊...什么鬼?本地run可以,但是build之后并没有生效!!! 我们项目引入的第三方UI库 ...

  6. 数据库的数据进行改动,Cognos报表展示未及时更新

    1. 问题描述 手工修改了DB中的测试数据,但是返回报表看,数据还没有更新 2. 问题分析 这是因为Cognos为了查询效率设计了高速缓存的选项 3. 解决方案 方法1:在数据包端禁用高速缓存,那么所 ...

  7. js设置radio单选框值选中

    html页面: <div> <label><input type="radio" name="sex" value="m ...

  8. IDEA主类文件需要放置在SRC文件下,非包内

    构建flash项目后,主类文件需要放置在src下,而不是在某个包内. 这样才会找到入口主类,然后有输出. 主类里面有引用其他类,需要使用 import * 全部引入.

  9. Robot Framework自动化使用

    自动化测试框架---Robot Framework Robot Framework是用Python语言写的,所以在安装Robot Framework以前必须安装Python环境.Robot Frame ...

  10. MySQL运用

    进入mysql 命令行: mysql -uroot -p查看所有数据库: show databases;创建数据库: create database niu charset utf8;删除数据库: d ...