在IE中，脚本不会更改div的innerhtml

Question

I'm making a function that changes the source of an embed tag upon clicking the title of a song. This works in Chrome and Firefox, but not in Internet Explorer.

Here is the function:

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();
    }
}

And yes, I tried the embedded player in Chrome and Firefox, and I tried using the html5 audio element in IE with m4a files (with the source being changed in the same way as in Chrome and firefox).

Next, this is the audio player itself (including the whole thing just in case; sorry if it's irrelevant):

<?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>";
    };
};
?>

Finally, this is how the function is being called:

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

Thanks in advance for any advice you have.

Answer 1

IE's a bitch, isn't he?

IE doesn't reload an object element if its source has changed. It only loads it when the page loads, period.

So how to work around that? Simple: clone the existing element, delete the old one, and append the new one. Example:

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