0

Below is my code:

const list = document.createElement("ul");
document.body.append(list);
for(let i=0; i<100000; i++){
    let num = document.createElement("li");
    num.textContent = "This is " + i;
    list.append(num);
}

When I run this code, I see that the browser window is blank and shows as loading in the tab for few seconds, and then all the list elements are displayed at once. I want them to display one by one as they are being created rather than all at once. Is it possible to achieve this? Note that I have used a huge number in the loop so that I can observe the effect easily.

Hendry775
  • 1
  • 1
  • 2
    This is not how DOM rendering works. The elements are being rendered only after the loop is finished. You’d have to add a delay to make them render mid-loop. [See](//google.com/search?q=site%3Astackoverflow.com+js+setTimeout+in+for+loop) [How do I add a delay in a JavaScript loop?](/q/3583724/4642212). – Sebastian Simon Jun 25 '21 at 10:52

0 Answers0