CreateDocumnetFragment()和creatElement()的区别：

最新推荐文章于 2022-10-20 10:02:38 发布

yesyoucan_

最新推荐文章于 2022-10-20 10:02:38 发布

阅读量399

点赞数 1

分类专栏：前端文章标签： js 减少重排 creatElement createDocumentFragment

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

用法举例

createElement

var createElementEg = document.createELement('div');
// 添加元素方法1：innerHTML
createElementEg .innerHTML = '<span>this is createELement eg</span>';
var ele = document.getElementById('test');
// 添加元素方法2：appendChild
createElementEg.appendChild(ele);
  
  1
2
3
4
5
6

createDocumentFragment

var createDocumentFragmentEg = document.createDocumentFragment();
var ele = document.getElementById('test');
// 添加元素方法2：appendChild
createDocumentFragmentEg.appendChild(ele);
  
  1
2
3
4

共同点

添加子元素后返回值都是新添加的子元素，因此，可通过下面的方法利用innerHTML为createDocumentFragment添加子元素：

  var fragment = document.createDocumentFragment();
  var ret = fragment.appendChild(document.createElement('div'));
  ret.innerHTML = 'by innerHTML ';
  test1.appendChild(fragment);
  
  1
2
3
4

都可以通过appendChild添加子元素，且子元素必须是node类型，不能为文本。
若添加的子元素是文档中存在的元素，则通过appendChild在为其添加子元素时，会从文档中删除之前存在的元素。

区别

createElement创建的是元素节点，节点类型为1，createDocumentFragment创建的是文档碎片，节点类型是11
通过createElement新建元素必须指定元素tagName,因为其可用innerHTML添加子元素。通过createDocumentFragment则不必。
连续将通过createElement新建的元素添加到其他元素上，则只会将新建的元素添加到最后一个其他元素上，即下面的test2上，程序会报错。

   var createElement = document.createElement('div');
    createElement.appendChild(textCreateElement);
    test1.appendChild(createElement );
    test2.appendChild(createElement );
  
  1
2
3
4

而连续将通过createDocumentFragment新建的元素通过appendChild添加到其他元素上，则只会将新建的元素添加到第一个其他元素上，即下面的test1上，程序会报错。

 var fragment = document.createDocumentFragment();
  fragment.appendChild(testfragment);
  test1.appendChild(fragment);
  test2.appendChild(fragment);
  
  1
2
3
4

通过createElement创建的元素是直接插入到文档中，而通过createDocumentFragment创建的元素插入到文档中的是他的子元素。
通过createElement创建的元素插入文档后，还可以取到创建时的返回值，即上面例子中createElement还是创建的那个div元素，而createDocumentFragment创建的元素插入到文档后，就不能访问创建时的返回值了，相当于把自己创建的文档片段直接挪到文档中了。

文章2：

在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/archive/2011/12/19/2293876.html

        </div>

yesyoucan_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CreateDocumnetFragment()和creatElement()的区别：

用法举例createElementvar createElementEg = document.createELement('div');// 添加元素方法1：innerHTMLcreateElementEg .innerHTML = '&lt;span&gt;this is createELement eg&lt;/span&gt;';va...
复制链接

扫一扫