JavaScript innerHTML not working for IE?

Question

I use ajax call to list for my dropdown and assign it to html, works fine for mozilla nad crome, but for IE it displays an empty dropdown

var xmlhttp;

var strURL = "selectedu.php?selectward="+selectward;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        if(xmlhttp.responseText=="NOER")
        {
            alert("Select ER Type");
        }
        else
        {
            document.getElementById(id).innerHTML=xmlhttp.responseText;
        }   
    }
}
xmlhttp.open("GET",strURL,true);
xmlhttp.send();

Answer 1

The property innerHTMLhas some problems in IE when trying to add or update form elements, a workaround is to create a div and set the innerHtml property on it before adding it to the DOM:

var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
var container = document.getElementById(id);
container.appendChild(newdiv);

Answer 2

If the document is an XHTML, IE does not allow the property to be set directly innerHTML. You need responseTextto parse the elements in the DOM and replace the contents of the existing element with these elements.

Answer 3

Perhaps you can use append(). Example:

$get('yourTargetObjectId').append('<p>this test to add</p>');

append()inserts content at the end of the selected item and uses prepend()to insert at the beginning of the selected item.