ループ内のDOMへの要素の追加を避ける方法

Question

私の機能は以下の通りです。ハイパフォーマンスを考慮して、どのようにしてhtmlのループ構造にテキストを追加するのを避けることができますか？お知らせ下さい。どうもありがとうございます。

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

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

ループ内の文字列を作成し、ループが終了した後に一度の要素として文字列注入：あなたはループの外の要素を作成することができます

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

Answer 3

をし、ループ内に追加要素（DOMには触れない）。 その後、ループが終了したら、新しいオブジェクトをhtmlに追加します。