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

【问题标题】：How to avoid appending elements to DOM in a loop如何避免在循环中将元素附加到 DOM
【发布时间】：2017-07-16 14:41:14
【问题描述】：

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

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

【问题讨论】：

使用像 Handlebars 这样的模板引擎：handlebarsjs.com
另外这个问题可能更适合CodeReview

标签： javascript html performance dom

【解决方案1】：

您应该将这些添加到 document fragment，并在完成后附加该片段：

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 查找可能应该在调用此方法之前进行，以避免不必要的工作。

【讨论】：

感谢您的回答。应该改变 div.innerHTML = array[i] 吗？
@Sleepyhead 是的。对于这种疏忽，我深表歉意。

【解决方案2】：

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

【讨论】：

【解决方案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);
 }

【讨论】：