Using innerHTML to add ordered list fails in IE

Posted by Matt on Stack Overflow See other posts from Stack Overflow or by Matt
Published on 2010-06-07T14:55:37Z Indexed on 2010/06/07 15:12 UTC
Read the original article Hit count: 202

Filed under:
|

I'm using the following Javascript code to populate a DIV with an ordered list:

// send script back in split list
var scriptList = script.split("\n");
var finalScript = "<ol>\n";
var count = 0;
while(scriptList.length >= count) {
    if((scriptList[count]=="") || (scriptList[count] == undefined))  {
        count ++;
        continue;
    }

    finalScript = finalScript + "<li>" + scriptList[count] + "</li>\n";
    count ++;
}
finalScript = finalScript + "</ol>";
scriptingDiv.innerHTML = finalScript;

In firefox, if i look in the DOM using Firebug, this correctly translates to the following and correctly displays an ordered list.

<ol>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
</ol>

In IE, it displays as if the </li> tags are <br /> tags and ignores all the other tags, like this:

This is the first item in the list
This is the second item in the list

Do I need to dynamically add the ordered list to the DOM for this to work? As opposed to just setting the html code in the div using .innerHTML?

TIA

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about innerhtml