How to improve replaceWith performance on IE11

Question

I am rendering an array of data in table element, the data can be filtered so the table should be updated with the new data. I am using JQuery replaceWith() for replacing the old tbody element with new tbody which represents the new data, but it seems to take very long time on IE11 to be rendered when the length of the array of data is 1700.

This is my code:

var markup='', table = [] // 2D array of data;
   markup += '<tbody>';
     for (var row = 0; row < table.length; row++) {
       markup += '<tr role="row">';
        for (var col = 0; col < table[0].length; col++) {
                    markup += '<td>' + table[row][col] + '</td>';
         }
         markup += '</tr>';
     }
    markup += '</tbody>';

.$('#data-results > tbody').replaceWith(markup);

Answer 1

In my understanding, adding large strings of tags using .append() or .html() is supposed to be more efficient than adding through .replaceWith() . So, try my below lines of code to achieve the same you asked.

$('#data-results > tbody').empty();
$('#data-results > tbody').html(markup); 

In otherway, you can also try .innerHTML

$('#data-results > tbody').empty();
$('#data-results > tbody').innerHTML = markup;