纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法
纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法
覃勇铖 发表于1年前
纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法
  • 发表于 1年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

/**
     * 
纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法

* * http://www.myexception.cn/HTML-CSS/1876216.html

* http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/
     * @param {Object} html
     */
HTMLElement.prototype.beforeHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("beforebegin", html);
        return this;
    }
    var fragment = fragment(html);
    this.parentNode.insertBefore(fragment, this);
    // 据说下面这样子世界会更清净
    fragment = null;
};
HTMLElement.prototype.appendHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("beforeend", html);
        return this;
    }
    var fragment = fragment(html);
    this.appendChild(fragment);
    // 据说下面这样子世界会更清净
    fragment = null;
};
HTMLElement.prototype.prependHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("afterbegin", html);
        return this;
    }
    var fragment = fragment(html);
    // 插入到容器的前面 - 差异所在
    this.insertBefore(fragment, this.firstChild);
    // 内存回收?
    fragment = null;
};
HTMLElement.prototype.afterHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("afterend", html);
        return this;
    }
    var fragment = fragment(html);
    this.parentNode.insertBefore(fragment, this.nextSibling);
    // 据说下面这样子世界会更清净
    fragment = null;
};


function fragment(html) {
    var nodes, divTemp = document.createElement("div"),
        fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    // 此时div.childNodes就是我们需要的节点了
    nodes = divTemp.childNodes;
    for(var i = 0, length = nodes.length; i < length; i += 1) {
        // 容器fragment加载克隆的节点 - 克隆的作用是保证nodes的完整
        fragment.appendChild(nodes[i].cloneNode(true));
    }
    // 据说下面这样子世界会更清净
    nodes = null;
    divTemp = null;
    return fragment;
}

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 7
码字总数 6432
×
覃勇铖
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: