Best practices for DOM manipulation?

I’m trying to wrap my head around what the best practices are for reaching into the DOM. I’ve read that it should be kept to be kept to a minimum, but I frequently come across educational material that doesn’t stick to that approach, even on freeCodeCamp.

For example, I’m on the Twitch JSON API assignment. The provided example handles each streamer one at a time: retrieves JSON, builds HTML, plugs it into the DOM, rinse & repeat: https://codepen.io/FreeCodeCamp/full/Myvqmo/

Isn’t it generally a bad practice to be changing the DOM on each iteration of a loop? If so, I have another question…

What’s the best way to make the browser wait until all the API requests are done before it moves on to the other code? Ex: if I put the getJSON requests in a for loop, console.logs after the for loop get executed before data is returned from the requests. Should I be using async/await, Promise.all, or am I overthinking this? :slight_smile:

1 Like

…feel free to disregard that last paragraph. Promise.all worked like a charm. :smiley:

1 Like