internet explorer and dynamic lists from javascript

Question

I have a page that requires user input then it will execute some javascript and populate fields on the page. Part of this includes calling a perl script that will run and get data from another page check that against the input from the user. The number of items that the perl script will return could be anywhere from zero to ten or even more. To handle this I have written some javascript to append each item into a list on my html page.

The problem I am coming across is that it seems to work perfectly fine in Safari and chrome, but does not seem to want to work in internet explorer 6 or 7. The major issue here is that most of the people that will be using this will be on internet explorer. I have no errors in my javascript code.

<div id='testDiv'><ul></ul></div>

then I just have my javascript replace the instance off </ul> in the div with

<li>blah blah blah</li></ul>

and have that repeat for each time an item needs to be added to the list. Everything else on the page works fine, and there are even new line for where the new list items show be. However it does not show any text there.

is there something I am doing wrong or is internet explorer not rendering this correctly?

---

EDIT: added the requested information.

var dateList = document.getElementById('testDiv').innerHTML;
var insertToList = "<li><div>blah blah blah</div></li></ul>";
dateList = dateList.replace('</ul>', insertToList);
document.getElementById('testDiv').innerHTML = dateList;

I have this in a loop to cycle through the results and add results to the list as appropriate. Unfortunately, I cannot link you the page since this is an internal project.

Answer 1

Depending on what you are using for your selector engine, IE is different. I recommend using jQuery for selecting and replacing content as it handles browser differences for you.

Answer 2

In IE6 testDiv.innerHTML is <UL></UL>. Note the upper-case tags.

dateList.replace('</ul>', ...) can't find anything that matches so it doesn't perform the replace.

A better approach would be to get a reference to the list (ul) element and append the HTML there.

var ulRef = document.getElementById('testDiv').getElementsByTagName("ul")[0];
ulRef.innerHTML += "<li><div>blah blah blah</div></li>";