Another puzzling behavior of getElementById()

Question

Try this script: http://jsfiddle.net/8da54/1/. Why is the output different in Firefox and IE?

HTML:

<div id="div1">
<div id="div2"><div id="data">data</div></div>
<div id="div3">a-</div>
</div>

Javascript:

var data = document.getElementById("data");
document.getElementById("div2").innerHTML="";
document.getElementById("div3").appendChild(data);

Output:
FF: a-data
IE: a-

Answer 1

Appears to be one of the many IE .innerHTML bugs. In the meantime, you could remove elements the proper way:

var elem = document.getElementById("div2");
while (elem.firstChild) {
    elem.removeChild(elem.firstChild);
}

http://jsfiddle.net/8da54/2/