InnerHTML Causing Ul To Self-close

I'm trying to display a Twitter feed by pulling from a cached text file and looping through the tweets. Works fine until I try to turn these tweets into a list. The li elements a

Solution 1:

How about building a string and then assigning it to innerHTML when it's completely built (so you never inject broken html). Firing broken html into the browser bit by bit is bound to cause problems, because the browser cannot store a broken dom tree.

Solution 2:

This is probably a browser specific issue. I would recommend constructing a string for the innerHTML first, and assigning it at the end of your function.

ie:

var temp = "<ul>";
temp += "<li">;

etc...

document.getElement.innerHTML = temp;

Solution 3:

More clean

​var ul=document.createElement('ul');
for(i=0;i<len;i++)
{
    var li=document.createElement('li');
    li.innerHTML=linkify(tweet.text)+" "+relativeTime(tweet.created_at);
    ul.appendChild(li);
}

document.getElementById('twitter_status').appendChild(ul);

An example here.