DOM 通过 javascript 更新无效

Question

我只是为了学习目的而尝试使用 javascript 制作一个简单功能的原型，但是 <p> 标签内的内容没有更新，我被困在了这一点上。我的代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title> Ajax Search Box </title>
  <script>
   function LoadList()
   {
    var searchBox =  document.getElementById("txtSearch");
    var resultBox =  document.getElementById("results");
    var searchedChars = "";
    var xHttp = new XMLHttpRequest();
    searchedChars += searchBox.value;
    xHttp.onreadystatechange = function(){
     if(this.readyState == 4 && this.status == 200)
     {
      var xmlContent = this.responseXML;
      var nameList = xmlContent.getElementsByTagName("name");
      var dispText = "";
      for(var i = 0 ; i < nameList.length ; i++)
      {
       dispText += nameList[i].textContent + "<br/>";
      }
      resultBox.innerHtml = dispText;
     }
    };
    xHttp.open("GET","AssessorList.xml",true);
    xHttp.send();
   }
  </script>
 </head>
 <body>
  <input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
  <p id="results">
   No Data Available.
  </p>
  
 </body>
</html>

有人能告诉我为什么 innerHtml 没有更新吗？提前致谢。

P.S：代码正在从 xml 文件中获取数据，正如我在浏览器的控制台中看到的那样，这些值被传递给 dispText 变量。

Answer 1

 <!DOCTYPE html>    
 <html>     
 <body> 
 <input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />               
 <p id="results">No data available</p> 
     <script> 
     function LoadList() {   
        var xhttp = new
        XMLHttpRequest();   
        var searchBox = 
        document.getElementById("txtSearch");
        var resultBox =  document.getElementById("results");
        var searchedChars = "";
        searchedChars += searchBox.value;   
        xhttp.onreadystatechange = function() {
         //alert(this.status);
        if (this.readyState == 4 && this.status == 200) {
         var xmlContent = this.responseXML;
                            var nameList = searchedChars;
                            alert(nameList);
                            var dispText = "";
                            for(var i = 0 ; i < nameList.length ; i++)
                            {
                                dispText += nameList[i] + "<br/>";
                            }
                            resultBox.innerHTML = dispText;
        }   
    };   
      xhttp.open("GET", "ajax.txt", true);   
      xhttp.send(); 
     } </script>    
    </body> 
  </html>

希望对您有所帮助

DOM 通过 javascript 更新无效

DOM updation through javascript not working

html

javascript

ajax

dom

innerhtml