如何避免在循環中將元素附加到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

回答

相關問題