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

function emptyElement(element){
  var i = element.childNodes.length;
  while(i--){
    element.removeChild(element.lastChild);
  }
}

this one's actually quicker than the innerHTML trick, can be much quicker, depending on your browser. there are a few tests up on jsperf using similar functions that will give you some benchmarks...

Answer 2

I usually do

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

Then re-add rows where needed.