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);

 }

使用documentFragment的更多相关文章

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

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

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

    Text类型 文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容.Text节点具有以下特征: nodeType的值为3 nodeName的值为"text" nodeVa ...

  3. 高效的插入子节点DocumentFragment

    DocumentFragment 对象 DocumentFragment 接口表示文档的一部分(或一段).更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点. Docume ...

  4. 事件委托 documentFragment

    如果有一个列表页,页面结构是外面一个BODY, 里面有一万个子DIV,每个DIV里面有一些文字,这些文字都不相同.需求是,点击一个DIV,要求弹个alert框,将DIV里的文字显示出来.你会怎么做. ...

  5. 页面优化,DocumentFragment对象详解

    一.前言 最近项目不是很忙,所以去看了下之前总想整理的重汇和回流的相关资料,关于回流优化,提到了DocumentFragment的使用,这个对象在3年前我记得是有看过的,但是一直没深入了解过,所以这里 ...

  6. (89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

    DocumentFragment 节点 代表一个文档的片段,本身就是一个完整的 DOM 树形结构. 它没有父节点,.parentNode 返回 null 可以插入任意数量的子节点. 不属于当前文档,操 ...

  7. Javascript高级编程学习笔记(41)—— DOM(7)DocumentFragment类型

    DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...

  8. DocumentFragment对象

    一般动态创建html元素都是创建好了直接appendChild()上去,但是如果要添加大量的元素还用这个方法的话就会导致大量的重绘以及回流,所以需要一个'缓存区'来保存创建的节点,然后再一次性添加到父 ...

  9. 虚拟节点操作——DocumentFragment

    文章中转站: DocumentFragment对象 createDocumentFragment()用法总结 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

  10. 理解 DocumentFragment

    理解 DocumentFragment 含义:创建文档片段,它继承了Node的所有方法,对DOM操作性能非常好.创建文档片段 如下方法: var frag = document.createDocum ...

随机推荐

  1. DNS检测

    dig @58.241.41.152 6900255264940.barcode.cniotroot.cn naptr 没有naptr 好像有点异常 select count(*) as total ...

  2. LeetCode题目:Generate Parentheses

    原题地址:https://leetcode.com/problems/generate-parentheses/ 解决方法:回溯法 class Solution { private: vector&l ...

  3. json对象和json字符串之间的转换-JavaScript实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 计算机网络11--OSI參考模型

    本页内容 1.OSI參考模型简单介绍 2.OSI參考模型通信过程 3.OSI參考模型的数据封装 4.数据封装的意义 5.物理层 6.数据链路层 7.网络层 8.传输层 9.会话层 10.表示层 11. ...

  5. CSS遮罩层,全兼容

    <script type="text/javascript"> $(function(){ $('#divLocker').css({ "position&q ...

  6. 笔记本中G-Sensor(加速计) M-Sensor 陀螺仪等传感器的区别与作用

    1.G-sensor重力传感器 作用 G-sensor中文是加速度传感器的意思(英文全称是Accelerometer-sensor),它能够感知到加速力的变化,加速力就是当物体在加速过程中作用在物体上 ...

  7. Linux服务器重启后启动Oracle服务

    目录 1. 启动Oracle服务 2. 启动Oracle监听服务 © 版权声明:本文为博主原创文章,转载请注明出处 1. 启动Oracle服务 重启Linux服务器后,Oracle服务还需要手动启动. ...

  8. Linux上部署Java应用+Python3环境搭建

    给了Linux的测试环境,目前需要install JDK, Tomcat,此处记录下小白的操作过程. 1. 查询Linux发行版本,包括内核信息 (1) Linux查询内核信息 $ uname -a ...

  9. PHP中Soap模块安装与使用例子

    PHP5中的这个SOAP扩展目的是为了实现PHP对Web services的支持.与其它实现PHP对Web services的支持的方法不同,SOAP扩展是用C写的,因此它比其它方法具有速度优势 SO ...

  10. 多媒体开发之视频格式---1080p逐行和1080i隔行

    (1)简介 (2)1080p和1080i的区别 (3) ------------------autho:pkf ----------------------time:2015-1-4 (1)简介 (2 ...