JavaScript Remove All Children of a DOM Element

Here comes an interesting question: how to remove all child nodes of a DOM element in JavaScript?

Assume that we have a DOM element (for example, div or span) whose name is elm, the most trivial and intuitive way to remove all its child nodes is as follows:

elm.innerHTML = '';

It looks perfectly fine, and should works without any problem. In fact, I use this method to empty all contents of a DOM element in the beginning and it works as expected. But one time when I used this method again in the code, it works as expected in the latest version of Chrome, Firefox, and Opera, but failed to work in IE8. It fails in IE8 when I did something like the following code snippet:

elm.innerHTML = '';
elm.appendChild(childs);

I don't know why the above code will not work in IE8, so I did some search and found better ways to remove all child nodes in references [1] and [2]. The "canonical" and bug-free way should be as follows:

while (elm.hasChildNodes()) {
  elm.removeChild(elm.lastChild);
}

Maybe for some people the "canonical" way is obvious, but it takes me quite a while to debug and know that sometimes the trivial way will not work. So I wrote this post for those who have the same trouble as me.

Appendix

One of the methods to empty an array [5] in JavaScript is:

while(A.length > 0) {
  A.pop();
}

As you can see, the idea of empty an array here is the same as remove all child nodes. This is interesting so I put this in the appendix.

References: