createElement和createDocumentFragment区别

用法举例

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

createDocumentFragment

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

共同点

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

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

• 都可以通过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 );

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

 var fragment = document.createDocumentFragment();
  fragment.appendChild(testfragment);
  test1.appendChild(fragment);
  test2.appendChild(fragment);

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