What is the fastest way to remove child elements from the DOM in IE?

Question

I am using jQuery, and have a table element that contains a few hundred rows. I want to remove all of the rows, and then add a new set of rows. I do this by calling remove and then append on the parent element.

My append logic is fairly fast, and follows the advice given here: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

However, the single call to remove takes 5 times as long as the append. What is the fastest way to clear the children of a dom element?

EDIT: Here is a condensed version of the code I use:

var table = $('#mytable');
$('tbody', table).remove();
table.append(tBodyContents.join(''));

tBodyContents is an array of strings, that when combined will form a the html for the rows in the tbody.

Answer 1

I usually do

$('#myTableToEmpty').html('');

Then re-add rows where needed.

Answer 2

What about $('#tableId').empty()?

Documentation for empty method

Answer 3

If speed is really, really important, you're best of using innerHTML. $('tbody', table)[0].innerHTML = '';

I personally would just ignore jQuery alltogether, give the body an ID and just go for the document.getElementById('id').innerHTML = '' option. And offcourse still use jQuery for adding.