innerHTMLによってulが自動的に閉じる

Question

私は、キャッシュされたテキストファイルから引き出し、ツイートをループしてTwitterフィードを表示しようとしています。これらのつぶやきをリストにするまで、うまく動作します。 li要素はinnerHTMLに正しく追加されますが、ulは自動的に閉じられ、ulは消えます。

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

文字列を作成し、それが完全に構築されたときにinnerHTMLに割り当てる方法（壊れたhtmlを挿入しないように）ブラウザが破損したDOMツリーを格納することができないので、ビットごとに壊れたHTMLをブラウザに起動すると、問題が発生する可能性があります。

Answer 2

これはおそらくブラウザ固有の問題です。最初にinnerHTMLの文字列を作成し、関数の最後に文字列を割り当てることをお勧めします。

すなわち：

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

etc... 

document.getElement.innerHTML = temp; 

Answer 3

もっときれい

​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); 

例here。