JavaScript IEでElement.insertBeforeがうまく動かない!

JavaScript IEでElement.insertBeforeがうまく動かない!

世の中でスマートフォン開発が主流のようですが、弊社では、まだまだPC系の開発も盛んに行なっています。

昔から開発員は決まって「IEの仕様は他のブラウザとえらい違う」という怒りをぶつける対象になってきました。
今回もそんなIEに関するお話です。

insertBefore調査

DOM構造に変更をかける際に、よく使う命令の「insertBefore」で、IEだけ、何故か見え方が違っていたので調査したところ、、他ブラウザと仕様が違っていました。

商用サービスでは、全てのブラウザ(主要ブラウザ「IE」「Chrome」「Firefox」「Opera」)において、同じ挙動を求められるので、開発側としては、同じコードで行なったほうが、バージョン管理も楽になるので、その方法を追求してみました。

構文

var insertedElement = parentElement.insertBefore(newElement,referenceElement);

  • insertedElement 挿入されたノード。
  • parentElement 新しく挿入されるノードの親ノード
  • newElement 挿入されるノード
  • referenceElement newElement が挿入される前にあるノード

ブラウザサポート

Chrome Internet Explorer Firefox (Gecko) Opera Safari (WebKit)
OK OK
※下位verに問題あり。
OK OK OK

上記のようになっています。

IEに関しては、一部に問題があるようです。

私が直面した問題は、挿入したいノードに、子要素を持たない場合、IE8で追加されないということ。

これは、少々厄介な問題でした。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...