Javascript 如何避免在循环中向DOM追加元素

我的函数如下所示。考虑到高性能，如何避免在HTML中添加循环结构中的文本？请告知。非常感谢你

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

函数createDiv（数组）{
var i；
var target=document.getElementById（“容器”）；
对于（i=0；i

在循环中创建一个字符串，然后在循环完成后将该字符串作为元素注入一次：

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

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

函数createDiv（数组）{
var结果=”；
var target=document.getElementById（“容器”）；
对于（var i=0；i

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

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

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

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

var target=document.getElementById（“容器”）；
函数createDiv（数组）{
var fragment=document.createDocumentFragment（）；
对于（var i=0；i

---

这种方法只对DOM进行一次变异。另外请注意，

#容器

查找可能应在调用此方法之前进行，以避免不必要的工作。

使用诸如Handlebar之类的模板引擎：此外，此问题可能更适合于感谢您的回答。是否应更改div.innerHTML=array[i]？@Sleepyhead是。我为我的疏忽道歉。