用法举例
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
创建的元素插入到文档后,就不能访问创建时的返回值了,相当于把自己创建的文档片段直接挪到文档中了。