やったこと

webサービスを作るときに考えたことを垂れ流します

【jQuery】IEでテーブル要素を追加したら親子関係がめちゃくちゃに!

最近「グーグルマップAPI」を使って遊んでいるんですが、変な問題に悩まされてしまいました・・。

グーグルマップをクリックしたときにポップアップ表示される「info_window」というのがあるですが、ここにjQueryで定義した要素をたくさん追加すると、親子関係が何かおかしくなってしまう・・。

具体的にいうと、「テーブル要素」の後に追加した要素が、全てテーブル中に取り込まれて、子要素になってしまう・・。

これはIEだけで起きる現象で、他のブラウザでは起きません・・。

これは恒例のIEクソバグだと思うので、もう理屈を考えても仕方ありません・・。

下記のように、IEの場合だけ、テーブル要素の後ろに追加するべき要素を、遅れたタイミングで追加(append)するようにしました・・。
(こうすればテーブル要素内に取り込まれず、兄弟関係として追加できるみたい)

  //Googleマップのウィンドウを定義
  var info_window = new google.maps.InfoWindow({
    //パラメータ
    content: jQuery(hogege_map_content).prop('outerHTML')
  });

  //ブラウザがIEかどうかチェック
  var is_IE = false;
  var userAgent = window.navigator.userAgent.toLowerCase();
  if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
    var is_IE = true;
  }

  //IEの場合は後から要素を追加
  if (is_IE  == true){
    google.maps.event.addListener(info_window, 'domready', function(){
      jQuery(hogege_map_content).append(ie_kuso1);
      jQuery(hogege_map_content).append(ie_kuso2);
      jQuery(hogege_map_content).append(ie_kuso3);
   });
  }

クソコードとなりますが、異常です・・。