Question

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

<input id="input" type="range" min="0" max="100" step="10" value="0">

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

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);
 }

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

3 个答案: