innerHTML로 인해 ul이 자동 닫힘

Question

트윗 피드를 캐시 된 텍스트 파일에서 가져 와서 트윗을 반복하여 표시하려고합니다. 이 트윗을 목록으로 만들려고 시도 할 때까지 잘 작동합니다. 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을.