IEでは、スクリプトはdivのinnerhtmlを変更しません

Question

私は、曲のタイトルをクリックすると埋め込みタグのソースを変更する機能を作っています。これはChromeとFirefoxでは動作しますが、Internet Explorerでは動作しません。ここで

が関数である：

function loadSong(title) { 
    var wav = "samples/" + title + ".wav"; 
    var ie = "<embed id='ie' src='" + wav + "'></embed>"; 
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { 
     //test for MSIE x.x 
     var newSong = document.getElementById("playerwrapper") 
     newSong.innerHTML = ie; 
    } else { 
     var audio = document.getElementById("audio"); 
     audio.pause(); 
     audio.src = wav; 
     audio.play(); 
    } 
} 

そして、はい、私はChromeとFirefoxで埋め込まれたプレーヤーを試みたが、私はソースが変更された状態でM4AファイルとIEでHTML5オーディオ要素を（使用してみましたChromeとFirefoxと同じ方法）。

次に、これはオーディオプレーヤーそのものです（念のため全体のものを含め、申し訳ありません、それは無関係の場合）：

<?php 
if($samples == 1) { 
    if (isset($_SERVER['HTTP_USER_AGENT']) && 
     (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false)) 
    { 
     print " 
      <div id='playrwrapper'> 
       <embed id='ie' src='samples/alright.wav' autostart='false'> 
       </embed> 
      </div>"; 
    } else { 
     print " 
      <div id='playerwrapper'> 
       <audio id='audio' preload='auto' tabindex='0' controls> 
        <source id='wav' type='audio/wav' src='samples/alright.wav'/> 
       </audio> 
      </div>"; 
    }; 
}; 
?> 

は最後に、これは、関数が呼び出されている方法です。

<p onclick='loadSong("songtitle")'>Song Title</p> 
<p onclick='loadSong("anothersongtitle")'>Another Song Title</p> 
<p onclick='loadSong("doomkittiesofmars")'>Doom Kitties of Mars</p> 

アドバイスをいただきありがとうございます。

Answer 1

IEは雌犬ですか？

ソースが変更された場合、IEはobject要素をリロードしません。それは、ページが読み込まれたときにのみ読み込みます。

どうすれば対処できますか？単純：既存の要素を複製し、古い要素を削除して新しい要素を追加します。例：

// innerHTML bla bla bla 
newS = newSong.cloneNode(true) // Deep copy 
newSong.parentNode.replaceChild(newS, newSong)