innerHTML 导致 ul 自动关闭答案

【问题标题】：innerHTML causing ul to self-closeinnerHTML 导致 ul 自动关闭
【发布时间】：2012-04-12 00:06:49
【问题描述】：

我试图通过从缓存的文本文件中提取并循环浏览推文来显示 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>"; 
}
 }

【问题讨论】：

标签： javascript html-lists innerhtml

【解决方案1】：

如何构建一个字符串，然后在它完全构建后将其分配给innerHTML（这样您就永远不会注入损坏的html）。一点一点地把坏掉的html放到浏览器里肯定会出问题，因为浏览器不能存储坏掉的dom树。

【讨论】：

【解决方案2】：

这可能是特定于浏览器的问题。我建议先为 innerHTML 构造一个字符串，然后在函数末尾分配它。

即：

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

etc...

document.getElement.innerHTML = temp;

【讨论】：

【解决方案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。

【讨论】：