Generate HTML from JSON (most efficient way in jQuery)

I have to generate a lot of tables from different jsonfiles (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 + '<tr>' +
        '<td>' + person.value1 + '</td>' + 
        '<td>' + person.value2 + '</td>' + 
        '<td>' + person.value3 + '</td>' + 
        '<td>' + person.value4 + '</td>' + 
        '<td>' + person.value5 + '</td>' + 
      '</tr>';
    });

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

  }(data));

  (function addPersonsTable2(personsData){

    var elementContainer = '';

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

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

  }(data));


  /*
  *
  *
  *
  *
  *  <..... And many more tables
  *
  *
  *
  *
  */

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

});