Wie aktualisiert man das DOM-Element bei jeder Schleifeniteration?

Question

Hier möchte ich Demox-Element mit allen Iterationen von JsoDemo aktualisieren, aber ich bekomme nur letzte Element in Array.Wie ordne ich Schleife, so dass ich eins nach dem anderen aktualisieren?

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

Sie verändern die innerHTML jedes Mal, wenn die Schleife durchlaufen, so, wenn es fertig ist nur Sie die letzte bekommen. Sie können entweder document.getElementById("demoX").innerHTML += xxx; verwenden oder wenn Sie möchten, dass es durch sie hindurchgeht, verwenden Sie setInterval. Auch, wie die obige Antwort sagt, setzen Sie es in die Schleife

Answer 2

Nun, zuerst das Aktualisieren des DOM innerhalb einer Schleife ist eine große Leistung "nein nein" als sukzessive Änderungen an das DOM verursachen den Benutzer-Agent neu aufzubauen das DOM jedes Mal.

Erstellen Sie stattdessen eine Zeichenfolge in Ihrer Schleife und legen Sie den endgültigen Wert der Zeichenfolge in Ihrem DOM-Element fest, sobald die Schleife abgeschlossen ist.

Außerdem gilt .innerHTML für, wenn Sie eine Zeichenfolge übergeben, die HTML enthält, um den Inhalt eines Elements und die Zeichenfolge von dem HTML-Parser analysiert wird. Wenn Sie keine Zeichenfolge zuweisen, die HTML enthält, verwenden Sie stattdessen .textContent, um diese zusätzliche Arbeit zu vermeiden.

Jetzt zu Ihrem Problem, verwenden Sie =, wenn Sie += verwenden sollten, um jeden neuen Wert auf den letzten Wert verkettet zu haben. Und Sie brauchen return nichts von dieser Funktion, Sie brauchen es nur, um das Element zu aktualisieren:

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