Generate HTML from JSON I have to generate a lot of tables from different JSON files (up to 20 tables per page). Because it's a lot of data, I really want to keep loading speed in mind. I know it's better to use a non jQuery solution, but native is not in my skillset right now.

$(document).ready(function(){

  (function getPersonData(){
   $.getJSON('path/to/json', function(data){


  (function addPersonsTable1(personsData){

    var elementContainer = '';

    $.each(personsData.persons, function(key, person){      
      elementContainer = elementContainer + '&lt;tr&gt;' +
        '&lt;td&gt;' + person.value1 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value2 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value3 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value4 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value5 + '&lt;/td&gt;' + 
      '&lt;/tr&gt;';
    });

    $('.persons-table-1').append(elementContainer);

  }(data));

  (function addPersonsTable2(personsData){

    var elementContainer = '';

    $.each(personsData.persons, function(key, person){      
      elementContainer = elementContainer + '&lt;tr&gt;' +
        '&lt;td&gt;' + person.value1 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value2 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value3 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value4 + '&lt;/td&gt;' + 
        '&lt;td&gt;' + person.value5 + '&lt;/td&gt;' + 
      '&lt;/tr&gt;';
    });

    $('.persons-table-2').append(elementContainer);

  }(data));


  /*
  *
  *
  *
  *
  *  &lt;..... And many more tables
  *
  *
  *
  *
  */

 }).done(function(){
  loadedAnimation();
});

});
Use detach to remove the elements from the DOM, append the tables to the detached nodes, then add them back to to DOM:

var table = $( "#myTable" );
var parent = table.parent();

table.detach();

 // ... add lots and lots of rows to table

parent.append( table );


References


Detach Elements to Work with Them
jQuery API: detach