I have to dynamically render large tables using JavaScript and jQuery in particular. I am doing this by preparing HTML for the table first and doing append then:

var tableHTML = "<table>...</table>";
$("#container").empty().append(tableHTML);

Is this acceptable way to solve the task and if there faster ways of rendering data?

I have to dynamically render large tables using JavaScript and jQuery in particular. I am doing this by preparing HTML for the table first and doing append then:

var tableHTML = "<table>...</table>";
$("#container").empty().append(tableHTML);

Is this acceptable way to solve the task and if there faster ways of rendering data?

• javascript
• jquery
• html-table

• How large is large? The rendering speed/efficiency will vary between browsers and PCs, so you'd need to factor that in with timing/profiling. – Lee Taylor Commented Aug 30, 2012 at 16:05
• 1 Most of the time this seems to e up the right answer is not to show a large table and implement some sort of pagination... it is just bad usability to be showing a table where this bees a consideration. – Paolo Bergantino Commented Aug 30, 2012 at 16:06
• For sure I do use pagination. But it's also an option to show the whole table if user wants it. So I am looking for a way to increase rendering speed anyway. – Denis Kulagin Commented Aug 31, 2012 at 9:32

2 Answers 2

Yes, this is the most efficient way to do that with jQuery. If you wanted to get really fast, you could use bare-bones Javascript:

document.getElementById('container').innerHTML = tableHTML

Instead of using

$("#container").empty().append(tableHTML);

you could simply use

$("#container").html(tableHTML);

which would achieve the same thing. using plain old javascript may speed things up, but you would also have to makes sure to remove any event handlers that you have attached to the table with your code before removing the old content, since jQuery would typically handle this for you.