使用documentFragment

function insertHtml(range, val) {

 var doc = range.doc,

 frag = doc.createDocumentFragment();

 K(‘@‘ + val, doc).each(function() {

 frag.appendChild(this);

 });

 range.deleteContents();

 range.insertNode(frag);

 range.collapse(false);

 self.select(false);

 }
时间: 2024-10-12 10:34:20

使用documentFragment的相关文章

全栈JavaScript之路(十)学习 DocumentFragment 类型 节点

DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象,可以包含其它类型节点,并有能力访问.操作其中的节点,但是在文档中没有文档标记,相当于是一个页面不可见的容器.其构造函数为,function DocumentFragment() {[native code]}. DocumentFragment 类型节点的特征; nodeType:11 nodeName:#document-fragment nodeValue:null prasentNode:null

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作 文档片段节点的三个node属性——nodeType.nod

DOM-Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型

Text类型 文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容.Text节点具有以下特征: nodeType的值为3 nodeName的值为"text" nodeValue的值为节点所包含的文本 parentNode的值为一个Element 没有子节点 可以通过nodeValue属性或者data属性访问Text节点中所包含的文本.使用下列方法可以操作节点中的文本: appendData(text):将text添加到节点的末尾. deleteData(offset,coun

DocumentFragment

参考:JavaScript Tips - 使用DocumentFragment加快DOM渲染速度 使用场景:操作大量dom 用处:将多次的reflow转换成一次reflow,提高执行效率.听着像是数据库中的事务操作

理解 DocumentFragment

含义:创建文档片段,它继承了Node的所有方法,对DOM操作性能非常好.创建文档片段 如下方法: var frag = document.createDocumentFragment(); 文档片段有三个node属性,nodeType, nodeName, nodeValue; 他们的值分别是 11, '#document-fragment', null, 文档片段节点没有父节点parentNode. 如下代码演示: var frag = document.createDocumentFragm

【JavaScript】利用文件碎片DocumentFragment改进兼容IE6可调可控的图片滑块

上次在<[JavaScript]兼容IE6可调可控的图片滑块>(点击打开链接)的算法写得很不好,如果你要做N个图片的图片滑块,每次显示X张图片,则要一次性地多加载X-1张图片,还要用一种显示框移动的方法去实现.更可怕的是,还要理所当然地认为就是这样的.虽然这个违背常人思维方式在网上广泛流传,而且好像还是公式一样,就只有一种实现方法,其实不是的,明显可以利用文件碎片DocumentFragment去实现图片滑块,如果你要N个图片的图片滑块,就加载N个图片,这才是正常的.关键利用文件碎片,实现20

高效的插入子节点DocumentFragment

DocumentFragment 对象 DocumentFragment 接口表示文档的一部分(或一段).更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点. DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null. 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点.这使得 Docume

DocumentFragment(创建文档碎片节点)

使用DocumentFragment进行缓存操作,引发一次回流和重绘: 在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中. 假如想创建十个段落,使用常规的方式可能会写出这样的代码: 1 2 3 4 5 6 for(var

DocumentFragment --更快捷操作DOM的途径

使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点.可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%.下面我们就来看看DocumentFragments是如何使用的. DocumentFragment例子 我们要使用UL元素,然后往里面插入LI元素: <ul id="list"></ul> DOM插入和修改是一个很费力耗时的工作,所以,

从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型

这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,DocumentFragment,Attr类型. Comment类型 原型链继承关系为comment实例.__proto__->Comment.prototype->CharacterData.prototype->Node.prototype->EventTarget.prototyp