zoukankan      html  css  js  c++  java
  • 纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法

    jQuery  append() 方法中可以直接添加字符,如:$("p").append(" <b>Hello world!</b>");

    怎么用js实现呢:

    appendHTML:

    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.iteye.com/blog/shenchuochuo-2197445

    原文:https://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/

    $("p").append(" <b>Hello world!</b>");
  • 相关阅读:
    1026. 程序运行时间(15)
    C语言字符串/数组去重
    1025. 反转链表 (25)
    1024. 科学计数法 (20)
    1023. 组个最小数 (20)
    1022. D进制的A+B (20)
    1021. 个位数统计 (15)
    1020. 月饼 (25)
    前端001/正则表达式
    SSM001/构建maven多模块项目
  • 原文地址:https://www.cnblogs.com/7qin/p/12117251.html
Copyright © 2011-2022 走看看