Question

I am trying to show a list of survey by javascript.
Here is the code:

function ParseSurveys(surveyList) {
        var sideBarSurveyList = document.getElementById('sliding-navigation');

        for (var m = 0; m < surveyList.length; m++) {
            var child = document.createElement("li");
            child.innerHTML += "<li class='sliding-element'><a href='javascript:sendSurvey(" + (m + 1) + ")'>Survey " + surveyList[m].Id + "</a></li>";
            sideBarSurveyList.insertBefore(child, sideBarSurveyList.lastChild);
        }
    }

It works perfectly on Chrome and Firefox, but it doesn’t on IE9.
On Chrome and Firefox, the survey list look like this:
• Survey 1
That’s what I want.

However, on IE9, it looks like:
•
• Survey 1

How come the IE9 shows two dots?
Can I have a easy solution for this? I don’t want to write two versions of Javascript for IE9 and any other browsers. 🙂

Thanks!
Ashley

Answer 1

Perhaps you are not intending to nest two <li>s? Try omitting the <li> tags in your innerHTML assignment:

function ParseSurveys(surveyList) {
    var sideBarSurveyList = document.getElementById('sliding-navigation');

    for (var m = 0; m < surveyList.length; m++) {
        var child = document.createElement("li");
        child.className = 'sliding-element';
        child.innerHTML += "<a href='javascript:sendSurvey(" + (m + 1) + ")'>Survey " + surveyList[m].Id + "</a>";
        sideBarSurveyList.insertBefore(child, sideBarSurveyList.lastChild);
    }
}