如何避免在循环中将元素附加到 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查找可能应该在调用此方法之前发生，以避免不必要的工作。