码迷,mamicode.com
首页 > Web开发 > 详细

原生JS添加DOM

时间:2020-05-13 18:35:23      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:内存回收   www   img   function   before   世界   fragment   UNC   type   

技术图片
HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段,一次性append,提高性能
        , 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;
};
技术图片

   

prependHTML:

技术图片
var prependHTML = function(el, 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));
    }
    // 插入到容器的前面 - 差异所在
    el.insertBefore(fragment, el.firstChild);
    // 内存回收?
    nodes = null;
    fragment = null;
};



转载:https://www.cnblogs.com/7qin/p/12117251.html

原生JS添加DOM

标签:内存回收   www   img   function   before   世界   fragment   UNC   type   

原文地址:https://www.cnblogs.com/llcdbk/p/12884092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!