How do I clear the contents of a div without innerHTML = "";

Question

I have a div that is filled by JS created DOM elements,

I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = ""; is not a good idea,

What is a valid alternative to doing this to clear the div's contents?

Solution 1

If you have jQuery then:

$('#elName').empty();

Otherwise:

var node = document.getElementById('elName');
while (node.hasChildNodes()) {
    node.removeChild(node.firstChild);
}

Solution 2

The Prototype way is Element.update() e.g.:

$('my_container').update()

Solution 3

If you're using jQuery have a look at the .empty() method http://api.jquery.com/empty/