JavaScript innerHTML is not working for IE?

Question

I am using ajax call for to bring the list for my drop down and assign it to html,works fine for mozilla nad crome but for IE it displays a blank dropdown

v         


        

Answer 1

The innerHTML property has some problems in IE when trying to add or update form elements, the workaround is to create a div and set the innerHtml property on that before appending 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 XHTML the IE will not allow the innerHTML property to be set directly. You would need to parse the responseText into DOM elements and replace the contents of the existing element with those elements.

Answer 3

If you're using jQuery you can use append() like this:

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

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