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

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

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

来源

2017-02-25 Nina

使用像Handlebars模板引擎：http://handlebarsjs.com/ – dana

此外这个问题可能更适合[CodeReview]（http://codereview.stackexchange.com/） –

您应该将这些添加到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查找，以避免不必要的工作。

来源

2017-02-25 20:19:13 Sampson

感谢您的答案。应该改变div.innerHTML = array [i]？ – Nina

@Sleepyhead是的。我对这种疏忽表示歉意。 – Sampson

创建循环字符串，然后注入字符串作为元素的循环结束后一次：

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

来源

2017-02-25 20:17:11

你可以在循环外创建一个元素，并在循环内追加到该元素（不涉及DOM）。然后循环完成后，将新对象追加到html。

来源

2017-02-25 20:17:30 Shtut

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

回答

相关问题