すべてのループ反復でDOM要素を更新するにはどうすればよいですか？

Question

ここでは、jsoDemoのすべての反復でデモックス要素を更新したいのですが、array.Howの最後の要素を取得するだけで、ループを整理して1つずつ更新しますか？

function GETJSON() { 
    for (var i = 0; i < jsoDemo.length; i++) { 
     var xxx = jsoDemo[i].name; 
     console.log(xxx); 
    } 
    return document.getElementById("demoX").innerHTML = xxx; 
    //break; 
} 

Answer 1

あなたはそれが終了すると、あなたは最後のものだけを取得innerHTMLあなたがループを通過するたびに変化しています。 document.getElementById("demoX").innerHTML += xxx;を使用するか、それを循環させたい場合はsetIntervalを使用してください。また、上記の答えのように、ループの中に入れてください

Answer 2

まず、ループ内からDOMを更新することは、DOMへの連続的な変更がユーザエージェントの再構築毎回DOM。

代わりに、ループ内に文字列を作成し、ループが完了したら文字列の最終値をDOM要素に設定します。

また、.innerHTMLは、HTMLを含む文字列を要素のコンテンツに渡し、その文字列をHTMLパーサーが解析する場合に使用します。 HTMLを含む文字列を割り当てない場合は、代わりに.textContentを使用してください。

+=を使用して新しい値を最後の値に連結するときは、問題の場合は=を使用しています。そして、あなたはこの関数から何かをreturnする必要はありません。要素を更新する必要があるだけです。

function GETJSON() { 
    var result = ""; 
    for (var i = 0; i < jsoDemo.length; i++) { 
    result += jsoDemo[i].name; 
    } 
    document.getElementById("demoX").textContent = result; 
}