Question

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 append to the innerHTML properly, but the opening ul self-closes, and the ending ul disappears.

function twitterStatusCallback(obj) {
   if(obj && obj.length){
       document.getElementById('twitter_status').innerHTML += "<ul>";
       var len = obj.length;

      for(var i = 0; i < len; i++){
    //Only get tweets less than 7 days old.
    if ((relativeTimeNumeric(obj[i].created_at)) < (8*24*60*60)) { 

    var tweet = obj[i];

        document.getElementById('twitter_status').innerHTML += "<li>" + linkify(tweet.text);
        document.getElementById('twitter_status').innerHTML += relativeTime(tweet.created_at) +"</li>";

   }
   }
  document.getElementById('twitter_status').innerHTML += "</ul>"; 
}
 }

Answer 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.