Question

I know that accessing and manipulating the DOM can be very costly, so I want to do this as efficiently as possible. My situation is that a certain div will always contain a list of items, however sometimes I want to refresh that list with a completely different set of items. In this case, I can build the new list and append it to that div, but I also need to clear out the out list. What’s the best way? Set the innerHTML to the empty string? Iterate over the child nodes and call ‘removeChild’? Something else?

Answer 1

Have a look on QuirksMode. It may take some digging, but there are times for just this operation in various browsers. Although the tests were done more than a year ago, setting innerHTML to '' was the fastest in most browsers.

P.S. here is the page.