Question

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

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

这是代码片段：

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

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

    }

}

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

Answer 1

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

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

    }

}

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

Answer 2

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

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

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

    }

}

Answer 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"));
    }
}

Answer 4

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

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

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

InnerHTML会覆盖以前的条目吗？

4 个答案: