在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。

网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如：

 
var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++){
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    document.body.appendChild(op);
}

var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();

for(var i=0;i<arrText.length;i++){
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    oFrag.appendChild(op);

}
document.body.appendChild(oFrag);
 

（声明：这是我google的第一个例子，并不代表对原作者有任何意见，原文地址http://www.cnitblog.com/asfman/articles/32614.html）

这个说法并没有错，但是并不严谨，因为像这种用法，主要还是用在目标节点是已存在并且有一部分内容的情况下，比如上面例子中的body元素，如果目标节点并不存在或者为空，完全可以用createElement创建一个相同的元素，操作之后再使用一次appendChild或者replaceChild来达到相同的目的，这样也不存在重复刷新的问题。

虽说我平时都是把两者混着用，但是还是得明白两者之间的一点区别：

第一：

createElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，并且createDocumentFragment创建的元素在文档中没有对应的标记，因此在页面上只能用js中访问到。

demo：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #outer{ height: 200px; border: 1px solid #006400;}
    </style>
</head>
<body>
<div id="outer">
</div>
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
var fragment_1 = document.createDocumentFragment();
        fragment_1.innerHTML = '<p>我是一个粉刷匠</p>';
        document.body.appendChild(fragment_1);
    var fragment_2 = document.createElement('p');
        fragment_2.innerHTML = '粉刷本领强';
        document.body.appendChild(fragment_2);
</script>
</body>
</html>
 

第二：另一个最主要的区别就是createElement创建的元素可以重复操作，添加之后就算从文档里面移除依旧归文档所有，可以继续操作，但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了（说明：这里的添加并不是添加了新创建的片段，因为上面说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。

一个对比的例子：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #outer{ height: 200px; border: 1px solid #006400;}
    </style>
</head>
<body>
<div id="outer">
</div>
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    var outer = $('outer');
    var inner = $('inner'); 
    $('btn_1').onclick = function(){
        var div = document.createElement('div');
            div.innerHTML = '<p>测试createElement</p>';
        document.body.appendChild(div);
        setTimeout(function(){
            outer.appendChild(div);
            setTimeout(function(){
                outer.removeChild(div);
            },1000)
        },1000)
    }
    $('btn_2').onclick = function(){
        var p = document.createElement('p');
            p.innerHTML = '测试DocumentFragment';
        var fragment = document.createDocumentFragment();
            fragment.appendChild(p);
            fragment.innerHTML = '<p>测试DocumentFragment</p>';
            fragment.innerHTML = '<span>测试DocumentFragment</span>';
        document.body.appendChild(fragment);
        setTimeout(function(){
            outer.appendChild(fragment);//报错，因为此时文档内部已经能够不存在fragment了
            setTimeout(function(){
                outer.removeChild(fragment);
            },1000)
        },1000)
    }
</script>
</body>
</html>
 

本文转载自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2011/12/19/2293876.html

createElement与createDocumentFragment的一些小区别的更多相关文章

  1. C#中四步轻松使用log4net记录本地日志（WPF有点小区别）

    在这里,记录我在项目中使用log4net记录本地日志的步骤.在不会之前感觉很难,很神秘,一旦会了之后其实没那么难.其实所有的事情都是一样的,下面我就分享一下我使用log4Net的经验. 第一步:首先从 ...

  2. safari 与 chrome 的小区别大BUG

    safari 与 chrome 的小区别大BUG 时间:2016-11-01 17:33:19 作者:zhongxia 原文地址:https://github.com/zhongxia245/blog ...

  3. createElement与createDocumentFragment的点点区别

    在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...

  4. python和ruby：一些需要注意的小区别。

    python和ruby的一些区别 基础区别 运算符号/和// ruby只有/符号.它根据操作的数字类型返回对应的结果.如果数字的类型是int,则返回整除结构,如果是float,则返回float类型的计 ...

  5. vue和mvvm的一些小区别

    Vue.js 和 MVVM 小细节   MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...

  6. python之路day06--python2/3小区别，小数据池的概念，编码的进阶str转为bytes类型，编码和解码

    python2#print() print'abc'#range() xrange()生成器#raw_input() python3# print('abc')# range()# input() = ...

  7. $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法

    $(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...

  8. System.Collections空间下的Hashtable类与System.Collections.Specialized下的StringDictionary的一点小区别

    哎.有一周没有写自己的博客. 最近在做一个调用web服务的小程序,没有使用c#自动生成的代理类,而是使用http-get.post.以及soap的方式去请求的,使用这http请求这种方式需要自己去拼参 ...

  9. C#中 DateTime , DateTime2 ,DateTimeOffset 之间的小区别 （转载）

    闲来无事列了个表比对一下这3兄弟之间还是有一点差距的╮(╯_╰)╭   DateTime DateTime2 DateTimeOffset 日期范围 1753-01-01到 9999-12-31 00 ...

随机推荐

  1. Mac 下 visual studio code 编辑器 设置为中文

    1,mac系统VScode设置中文 macOS 快捷键:command + shift + p 输入搜索 configure language     1.Ctrl+Shift+P 打开命令 2.搜索 ...

  2. 列表推导式中的各个元素的id并不一样

    列表推导式中的各个元素在不同的内存中,id不一样 # 列表推导式的不同id值 ----------------------------------------------------- T = [] ...

  3. Linux系统用终端打开图片

    一.现在开发多数使用的系统都是linux系统,但有的时候会遇到一些比较麻烦的小问题,比如:在某个文件夹中存入大量的图片时,想要查看某张图片的时候,当你使用图形化显示的时候,就会很卡,所以在这里我针对于 ...

  4. Luogu P1276 校门外的树（增强版）

    Luogu P1276 校门外的树(增强版) 本来看着是道普及-,就不打算写博客了,结果因为出了3次错,调试了15min就还是决定写一下-- 本题坑点: 1.每个位置有三种情况:空穴,树苗,树(而不只 ...

  5. Luogu P1294 高手去散步

    Luogu P1294 高手去散步 因为数据较小,所以用邻接矩阵存图即可. 将1号点到$t$号点分别设为起点,深搜遍历路线,开一个$vis$数组,记录每一个点是否被访问过.每次求出从当前起点出发的最大 ...

  6. Codeforces Round #511 (Div. 2) C. Enlarge GCD （质因数）

    题目 题意: 给你n个数a[1]...a[n],可以得到这n个数的最大公约数, 现在要求你在n个数中 尽量少删除数,使得被删之后的数组a的最大公约数比原来的大. 如果要删的数小于n,就输出要删的数的个 ...

  7. LG3690 【模板】Link Cut Tree 和 SDOI2008 洞穴勘测

    UPD:更新了写法. [模板]Link Cut Tree 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 后接两个整数(x,y),代表询问从x到y ...

  8. flask 框架 转载：https://cloud.tencent.com/developer/article/1465949

    1.cookie.py """ - 解释: 用来保持服务器和浏览器交互的状态的, 由服务器设置,存储在浏览器 - 作用: 用来做广告推送 - cookie的设置和获取 - ...

  9. Selenium常用API的使用java语言之16-下拉框选择

    有时我们会碰到下拉框,WebDriver提供了Select类来处理下接框. 如百度搜索设置的下拉框,如下图: 搜索下拉框实现代码如下: <select id="nr" nam ...

  10. ModbusRTU模式和结束符(转)

    Modbus RTU模式的协议字段 起始位 设备地址 功能码 数据 CRC校验 结束符 至少3.5个字符 8bit 8bit N*8bit 16bit 至少3.5个字符 Modbus协议RTU模式要求 ...