Javascript for loop architecture for rendering HTML

Question

I have a large array file containing 10 top objects. Each of them has 10-100 children, and each child has 10-100 units.

The way I am processing it now is if the triple for the loop loops through 2000 objects and builds html for these objects and adds it to the page.

$('body').append(generatedHTML);

The problem that I am facing right now is that the rendering is done forever, and while this is being processed, the page freezes.

Is there a better way to implement such a solution? How, for example, to download this step at a time so that the user can still interact with the page while it is loading?

Code example below

for (var i = 0; i < rootElements; i++) {
  var child = rootElements[i];

  var new_obj = child.secondElement;
  for (var j = 0; j < new_obj.length; j++) {
  // Another for loop to process the children of new_obj

Answer 1

, setTimeout(), . : http://www.javascriptkata.com/2010/08/10/nofreeze-a-library-that-avoids-freezing-in-javascript/