使用原生JS实现DOM元素的创建

思路

创建出元素后将其添加到页面中 1、使用innerHTML，会覆盖页面上原有的内容 2、使用appendChild，appendChild只可以添加单个对象，不可添加创建的元素集合。所以，使用doucmentFragment (文档片段)作为容器（把容器中的子元素追加到指定元素中去，而不会占用文档的结构），将其中的内容使用appendChild添加到页面中

创建DOM元素的两种方式

1、创建一次，添加一次（循环几次，就要创建、添加几次）。涉及重绘重排（影响下面的DOM结构），效率低

var i = 0, len = 10;
    for (; i < len; i++) {
        var div = document.createElement("div");
        div.innerHTML = "div " + i;
        document.body.appendChild(div);//appendChild消耗性能
    }

2、创建完所有元素后，一次添加，效率高

以一个容器接收创建出的元素，循环完成后，一次性添加推荐

使用 doucmentFragment (文档片段)作为容器 优势：只作为容器，不占用结构即：还是要往文档片段中追加元素，然后最后一次将文档片段追加到指定的元素中去。这样，appendChild只会把容器中的子元素追加到指定元素中去，而不会占用文档的结构（文档片段自身不会在页面中显示）

 var createElement = function (htmlString) {
        var dv = document.createElement("div");
        dv.innerHTML = htmlString;
        //docFrag无innerHTML属性，因此要先生成dv,让其接收传入的htmlString
        var docFrag = document.createDocumentFragment();
//        while (dv.firstChild !== null) {
//            docFrag.appendChild(dv.firstChild);
//        }//作用同for循环
        var i= 0,len=dv.childNodes.length;
        for(;i<len;i++){
            docFrag.appendChild(dv.childNodes[0]);
            //appendChild(单个元素，不能是集合)
            //a.appendChild(b)将b从原位置移除，添加到a中。因此dv.childNodes[0]不断从dv.childNodes数组中移除，dv.childNodes.length不断减1,所以在循环外获取dv.childNodes.length。
        }
        return docFrag;
    }
    var a = createElement("<div>123</div><p>456</p><a>789</a>");
    document.body.appendChild(a);

使用字符串
- 使用字符串拼接

var i = 0, len = 10, str = "";
    for (; i < len; i++) {
        str += "<div>" + "div " + i + "</div>"//字符串拼接消耗内存
    }
    document.body.innerHTML = str;//innerHTML会覆盖网页上的原内容

使用数组push创建出的元素，然后调用join方法

var i = 0, len = 10, str = "", arr = [];
    for (; i < len; i++) {
        arr.push("<div>" + "div " + i + "</div>");
    }
    document.body.innerHTML = arr.join(" ");

思路

创建DOM元素的两种方式

FEATURED TAGS

FRIENDS