染数据的方法

  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. 关于java类加载机制的一些理解

    关于java的类加载机制加载顺序,这个东西可以说是基础的东西,不过很遗憾这方面很多人也都不是很在意,比如我自己,最近上班闲下来了,就开始看一些博客文章了,今天恰好被一篇博文给吸引了,并且他的示例题一开 ...

  2. elementUi中的计数器ele-mumber中的change事件传参及事件调用

    业务场景是需要在点击业务工作量的时候设置任务工作量这一项的评分不能大于任务质量及任务时限的权重之和除以二 上代码 JS逻辑代码 因出现弹出层提示后设置输入框的值如果大于sum的值,设置输入的值为sum ...

  3. mac 中git操作账号的保存与删除

    保存: 在mac中自动保存git的用户名和密码很简单,只需要在终端命令行中输入下面的命令就是: git config --global credential.helper osxkeychain 然后 ...

  4. WinForm界面设计-Button添加背景图去边框

    转自:https://www.cnblogs.com/tommy-huang/p/4283538.html 1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = & ...

  5. flex布局设置width无效

    子元素设置 : flex: 0 0 85px; 参数: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有 ...

  6. 虚拟机centos7 基础模板制作

    用于新模板制作,主要针对一些基本组件的安装 分区.安装不在此赘述 最小化安装centos7-minimal-1810 1.安装wget yum install wget -y 2.更换aliyun源 ...

  7. java无锁化编程一:目录

    假设我们用netty做服务,当接受到网络传输的码流,我们通过某种手段将这种传输数据解析成了熟悉的pojo,那这些pojo该如何进一步处理? 比如游戏中的抢购.场景业务等,对处理那种高并发的业务场景,如 ...

  8. SpringBoot项目搭建与打包

    一.环境准备 本地java环境jdk1.8 Maven版本3.5.2 IDE工具idea2017 二.SpringBoot微服务搭建 1.点击File >> New >> Pr ...

  9. vs2017 重新生成报错 MSB4057 BuildDependsOn DependsOnTargets ContainerPrepareForLaunch 解决办法

    环境: win10 vs2017 .net core 删除引用的包: Microsoft.VisualStudio.Azure.Containers.Tools.Targets

  10. js 表格操作(兼容模式

    用insertRow,insertRow操作表格时,发现在谷歌浏览器中顺序和IE是反的 // 表格新增行 function addTableRow($id,$arr,$rowAttr){ var ta ...