InnerHTML 会覆盖以前的条目吗？答案

【问题标题】：Does InnerHTML overwrite previous entries?InnerHTML 会覆盖以前的条目吗？
【发布时间】：2014-04-16 18:46:06
【问题描述】：

作为大一学生，我们刚刚学会了如何使用 DOM 而不是 document.write 来显示我们的元素。

我有一个循环，我希望它在遍历所有元素后显示多个元素，但它总是显示最后一个，所以我猜前面的条目被覆盖了？

这是一段代码：

for(var i=0;i<shows.length;i++){  
    if(fgenCTRL.value===films[i].genre)
    {

     filmDiv.innerHTML=shows[i].title+"<br>";

    }

}

它应该显示 2 个元素作为输出，但它只显示一个。请原谅我对英语和编码技能的使用不佳。

【问题讨论】：

如果可以避免document.write。它会在未来让你更头痛，对你的问题说“是”。覆盖 innerHTML 属性将清除其先前的值。
你的假设是正确的
只需将= 更改为+=。

标签： javascript dom innerhtml

【解决方案1】：

是的，在您的代码中，您只需替换您的值，尝试使用此代码。

for(var i=0;i<shows.length;i++){  
    if(fgenCTRL.value===films[i].genre)
    {

     filmDiv.innerHTML=filmDiv.innerHTML+shows[i].title+"<br>";

    }

}

【讨论】：

【解决方案2】：

for(var i=0;i<shows.length;i++){  
    if(fgenCTRL.value===films[i].genre)
    {

     filmDiv.innerHTML+=shows[i].title+"<br>";

    }

}

你必须添加新值，而不是每次都设置。

【讨论】：

【解决方案3】：

是的，设置 .innerHTML 属性会覆盖该属性之前的任何值。

如果你想将你的信息附加到它上面，你必须通过添加到以前的 HTML 来编码它以附加，而不是覆盖以前的值（注意这里使用 +=）。

for(var i=0;i<shows.length;i++){  
    if(fgenCTRL.value===films[i].genre) {
      filmDiv.innerHTML += shows[i].title+"<br>";
    }
}

虽然一般来说，最好不要以这种方式使用.innerHTML，因为您会重复地将所有内容从 DOM 元素转换为 HTML，向 HTML 添加一些内容，然后再次将所有内容解析回 DOM 元素，创建所有新的 DOM 元素和摆脱所有以前的 DOM 元素。

最好只使用.appendChild() 来追加新的 DOM 元素，保留之前的 DOM 元素，而不是像这样每次都重新创建所有内容：

for(var i=0;i<shows.length;i++){  
    if(fgenCTRL.value===films[i].genre) {
      filmDiv.appendChild(document.createTextNode(shows[i].title));
      fileDiv.appendChild(document.createElement("br"));
    }
}

【讨论】：

【解决方案4】：

innerHTML 是一个包含字符串的 DOM 属性。它不是添加类似appendChild 的函数。

如果不想覆盖，则需要连接字符串

filmDiv.innerHTML += shows[i].title+"<br>";

【讨论】：