高效的插入子节点DocumentFragment

DocumentFragment 对象

DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。
DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。
不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作,尤其是与 Range 接口一起使用时更是如此。
可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。
也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 获取包含现有文档的片段的 DocumentFragment 节点。

通常我们插入文档的操作如下:

var nodes = div.childNodes;
for (var i=0, length=nodes.length; i<length; i+=1) {
   // 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整
   container.appendChild(nodes[i].cloneNode(true)); 
}

这样会导致浏览器不断的reflow 重绘,对性能造成影响。我们可以利用documentFragment的特点:

HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
       
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.appendChild(fragment);
    
    nodes = null;
    fragment = null;
};

只有一次~~~。

对于直接用innerHTML的方法,如果插入的元素要有什么click事件的绑定,当再次插入的时候事件就没了。这种情况下用使用事件的委托来搞定。比如:Jquery的on方法

insertAdjacentHTML

insert(插入)Adjacent(邻近)HTML。

 

 

语法如下:

element.insertAdjacentHTML(position, html);

position是相对于element元素的位置,并且只能是以下的字符串之一:

beforebegin
在 element 元素的前面。
afterbegin
在 element 元素的第一个子元素前面。
beforeend
在 element 元素的最后一个子元素后面。
afterend
在 element 元素的后面。

html是字符串被解析成HTML或XML插入到DOM树中。

posted @ 2016-12-23 11:59  btg.yoyo  阅读(678)  评论(0编辑  收藏  举报