在需要多次使用 innerHTML 的地方,一般是推荐用 DocumentFragment 来缓存,最后一次性插入 body,从而减少浏览器的渲染,提高性能,不过最近也发现一个 bug:

DocumentFragment 不支持 innerHTML

这是个什么意思呢?考虑下面代码:

let fragment=document.createDocumentFragment();
fragment.innerHTML='<p>test</p>';
console.log(fragment.childElementCount);//0

你会发现设置 innerHTML 并不能获取到子元素,如果换成 div:

let div=document.createElement('div');
div.innerHTML='<p>test</p>';
console.log(div.childElementCount);//1

相比之下,感觉很不合理,而且明显不合理,但实际上就是这个样子;

但是实际上说合理也是合理的,因为 DocumentFragment 永远不会被添加到文档里,所以没有原生的 innerHTML 属性,看起来也很正常,不是么?你可以修改 div 的innerHTML 而改变里面的内容,生成 DOM 对象,改变浏览器的渲染结果,但是 DocumentFragment 自身永远不会被添加进文档,浏览器里也永远看不到它,,,

参考文档:

using document.createDocumentFragment() and innerHTML to manipulate a DOM

DocumentFragment 不支持 innerHTML的更多相关文章

  1. 火狐不支持innerText属性,只支持innerHTML属性

    做的一个js的小程序放到火狐上用不了了,原因是innerText不是标准属性,换成innerHTML属性就好,但是可能需要把html标签给去掉

  2. 火狐对innerHtml的支持问题

    最新的Firefox是支持innerHTML的,但是不支持innerText.解决办法是将innerText换成textContent. $.getJSON("/api/Articles&q ...

  3. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  4. 解决 innerHTML 在 IE6-IE9中不能赋值的bug

    在MSDN可以了解跟多,关于innerHTML的介绍,但是在这里只要是解决表格部分问题 MSDN上有这样的记录: When using innerHTML to insert script, you ...

  5. 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

    在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签 插入技术,能够直接插入html代码字符串,简单.高 ...

  6. innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

    今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...

  7. DocumentFragment批量操作dom

    DocumentFragment,文档片段,不属于文档树,其parentNode为null.当把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而 ...

  8. innerHTML 和 innertext 以及 outerHTML

    今天在制作firefox下支持复制的js代码的时候,用到了innerText,测试发现原来firefox支持innerHTML但不支持innerText. test.innerHTML: 也就是从对象 ...

  9. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

  1. char类型到底是有符号还是无符号

    根据c标准,char类型到底是有符号整数类型还是无符号整数类型,这取决于c实现,也就是c编译器的作者的想法:( 那么,如何快速的编写一个检测程序,查看当前编译器如何对char进行定义? #includ ...

  2. 为什么在c语言中使用gets函数是危险的

      If you have code like this: char s[10]; gets( s ); and you type in more than 10 characters when th ...

  3. dbrd 8.4.6 源代码编译安装

    ---------------------------- 0.系统环境 ---------------------------- db01 192.168.50.10 /dev/sdb1 主节点 db ...

  4. [c#]分析器错误消息: 发现不明白的匹配。

    (1)同样的变量名称 protected System.Web.UI.WebControls.Label lbltitle; protected System.Web.UI.WebControls.L ...

  5. 【ActiveMQ】ActiveMQ在Windows的安装,以及点对点的消息发送案例

    公司最近会用MQ对某些业务进行处理,所以,这次我下载了apache-activemq-5.12.0-bin把玩下. 基于练习方便需要,使用Windows的版本. 参考的优秀文章: activemq的几 ...

  6. python用time函数计算程序运行时间

    内置模块time包含很多与时间相关函数.我们可通过它获得当前的时间和格式化时间输出. time(),以浮点形式返回自Linux新世纪以来经过的秒数.在linux中,00:00:00 UTC, Janu ...

  7. nginx+keeplived负载均衡配置

    一.nginx 编译安装 1.依赖环境安装     yum -y install gcc gcc-c++ zlib zlib-devel pcre pcre-devel openssl openssl ...

  8. 实例具体解释Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(二)

    这是本系列的第二篇,内容是 prefetch_related() 函数的用途.实现途径.以及用法. 本系列的第一篇在这里 第三篇在这里 3. prefetch_related() 对于多对多字段(Ma ...

  9. java程序中输出console的日志到文本

    http://blog.sina.com.cn/s/blog_76a8411a01010u2h.html 首先:当我们引入data-integration\lib文件夹下的所有jar包后 运行java ...

  10. jQuery Easyui Datagrid相同连续列合并扩展

    /** * author ____′↘夏悸 * create date 2012-11-5 **/$.extend($.fn.datagrid.methods, { autoMergeCells : ...