Geek asks and answers

InnerHTML forcing ul to close itself

I am trying to display a Twitter feed by pulling from a cached text file and scrolling through tweets. It works fine until I try to turn these tweets into a list. The li elements attach to innerHTML correctly, but the opening ul is self-closing 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>"; 
}
 }
+3
source share
3 answers

How to build a string and then assign it innerHTML when it's completely built (so you never insert broken html). Firing broken html in the browser in parts can cause problems because the browser cannot store the broken tree.

+5
source

, , . innerHTML .

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

etc...

document.getElement.innerHTML = temp;
+1

​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 is here .

+1
source

More articles:


All Articles