如何避免在循环中将元素附加到DOM

Question

我的功能如下。 考虑到高性能，如何避免在html的循环结构中添加文本？ 请指教。 非常感谢。

function  createDiv (array) {
    var i;
    var target = document.getElementById("container");
    for(i = 0; i < array.length; i++) {       
        target.appendChild("<div>" + array[i] + "</div>");
    }
}

Answer 1

您应该将这些添加到文档片段中 ，并在完成后附加该片段：

var target = document.getElementById("container");

function createDiv (array) {
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < array.length; i++) {       
        var div = document.createElement("div");
        div.innerHTML = array[i];
        fragment.appendChild(div);
    }
    target.appendChild(fragment);
 }

此方法仅将DOM更改一次。 另请注意， #container查找可能应该在调用此方法之前进行，以避免不必要的工作。

Answer 2

您可以在循环外部创建一个元素，然后在循环内部将其追加到该元素（不接触DOM）。 然后，在循环结束后，将新对象附加到html。

Answer 3

在循环中创建一个字符串，然后在循环结束后将该字符串作为元素注入：

function  createDiv (array) {
    var result = "";
    var target = document.getElementById("container");
    for(var i = 0; i < array.length; i++) {       
        result += "<div>" + array[i] + "</div>";
    }
    target.appendChild(result);
 }