innerHTMLとremoveChild()
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()を使用した方がいいということです。
関連記事
お問い合わせ
システム開発に関するお問い合わせをお待ちしています。
お急ぎの方は、Twitterでどうぞ。
もちろん、このページへのコメントも大歓迎です！