innerHTML未更新显示

innerHTML not updating display

本文关键字：显示 更新 innerHTML      更新时间：2023-09-26

首先，大家好，我是新来的。

为了总结我的问题，我读取了要显示在表中的XML文件的内容。做这件事的基本函数很好，我创建了一个派生函数，包括一个与输入字段相关的搜索过滤器。搜索算法运行良好，我可以使用alert（）函数预览搜索结果的HTML代码，这段代码看起来很合适，可以在浏览器中正常显示。然而，相关div的innerHTML代码没有更新。。。我非常感谢任何人能提供的任何意见或解决方案，因为我一直在做这件事！谢谢

这是代码：

    function printListMod2(){
    //Search parameters ?
    var searchContent = document.getElementById("searchField").value;
    var i=0;
    newHTML = "<table id='"tableInstrus'">";
    for (i=0;i<listInstrus.length;i++){
        filename = returnFilename(i);
        title = returnTitle(i);
        tempo = returnTempo(i);
        sample = returnSample(i);
        multi = returnMulti(i);
        style1 = returnStyle1(i);
        style2 = returnStyle2(i);
        var regEx = new RegExp(searchContent, 'gi');
        var resultSearch = title.match(regEx);
        if(resultSearch!=null){
            if(i%2==0){
                newHTML += "<tr class='"tr0'"><td class='"idColumn'">"+(i+1)+"</td><td class='"emptyColumn'"></td><td class='"nameColumn'">"+title+"</td><td class='"tempoColumn'">"+tempo+"</td><td class='"sampleColumn'">"+sample+"</td><td class='"multiColumn'">"+multi+"</td><td class='"styleColumn'">"+style1+"</td><td class='"styleColumn'">"+style2+"</td><td class='"addLink'"><a id="+filename+" onclick='"addLinkToPlaylist("+i+")'"><img title='"Add to playlist'" class='"addButton'" src='"images/buttonAdd.png'"/></a></td><td class='"playLink'"><a onclick='"playTrack("+i+","+true+")'"><img title='"Play this track'" class='"playButton'" src='"images/buttonPlaySmall.png'"/></a></td></tr>";
            }
            else{
                newHTML += "<tr class='"tr1'"><td class='"idColumn'">"+(i+1)+"</td><td class='"emptyColumn'"></td><td class='"nameColumn'">"+title+"</td><td class='"tempoColumn'">"+tempo+"</td><td class='"sampleColumn'">"+sample+"</td><td class='"multiColumn'">"+multi+"</td><td class='"styleColumn'">"+style1+"</td><td class='"styleColumn'">"+style2+"</td><td class='"addLink'"><a id="+filename+" onclick='"addLinkToPlaylist("+i+")'"><img title='"Add to playlist'" class='"addButton'" src='"images/buttonAdd.png'"/></a></td><td class='"playLink'"><a onclick='"playTrack("+i+","+true+")'"><img title='"Play this track'" class='"playButton'" src='"images/buttonPlaySmall.png'"/></a></td></tr>";
            }
        }
    }
    newHTML += "<tr><td class='"idColumn'"></td><td id='"emptyColumn'"></td><td class='"nameColumn'"></td><td class='"tempoColumn'"></td><td class='"sampleColumn'"></td><td class='"multiColumn'"></td><td></td><td></td></tr>";
    newHTML += "</table>";
    alert(newHTML); //this displays the HTML code properly
    document.getElementById("listDiv").innerHTML = newHTML; //this doesn't seem to do anything...
}

您的脚本是否在文档加载完成之前执行？然后它找不到#listDiv，因为div还不存在。

我会检查javascript控制台输出是否有错误，并检查以下代码是否没有返回未定义的：

{
  ...
  console.log( document.getElementById('listDiv') );
}
相关文章：