Question

我试图通过从缓存的文本文件中提取并循环播放推文来显示Twitter Feed。工作正常，直到我尝试将这些推文变成列表。 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）。将破碎的html逐位打入浏览器必然会导致问题，因为浏览器无法存储损坏的dom树。

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。

innerHTML导致ul自我关闭

3 个答案: