firegoby

IEとfirefoxでinnerHTMLとremoveChildを使用した際の挙動が違っていたのでメモ。

以下のソースは、DIV要素を作成してoBodyオブジェクトに挿入した後で、oBodyの中身を空にする処理を行っている。（実際にはこんなことありませんが。。。）

var oDiv = document.createElement('DIV');
oDiv.innerHTML = 'おはよう';
oBody.insertBefore(oDiv, null);
oBody.innerHTML = '';
alert(oDiv.innerHTML); // IEでは何も出ない

この処理の後、firefoxではoDivはまだDIV要素として存在しているが、IEでは空のオブジェクトになってしまう。

一方で、oBody.innerHTMLの行を以下のように変更してやると、IEでもoDivオブジェクトの値が残る。

var oDiv = document.createElement('DIV');
oDiv.innerHTML = 'おはよう';
oBody.insertBefore(oDiv, null);
oBody.removeChild(oBody.firstChild);
alert(oDiv.innerHTML); // おはよう

意味分かりにくいですよね？

とにかく、ある要素の中身を空にしたい場合は、inerHTML = ”みたいな安易な方法を使うよりも、まじめにremoveChild()を使用した方がいいということです。