Question

我有一个最终由XMLHttpRequest加载的DIV。在这个新加载的div应该是更新（如果存在）

   if (document.getElementById('newdiv') !== null) {
      document.getElementById('newdiv').innerHTML= xhr.responseText;
    }

似乎不起作用。当我对Element执行此检查时，由早期的XMLHttpRequest if (document.getElementById('newdiv') !== null)插入，返回null并且不会插入响应。如果我在页面加载的DOM中的元素上执行此操作，则可以正常工作。

如何更新页面加载后（可能）加载的元素值？

请不要jquery，仅限javascript 编辑以澄清

<body>
    <button onclick="f1()">
    <input onchange="f2(this.value)"/>
    <div id="parent"></div>
</body>    
<script>
function f1()  {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {             
      if (xhr.status == 200 && xhr.status < 300) 
        console.log(xhr.responseText);
        console.log(document.getElementById('parent'));
        if (document.getElementById('parent') !== null) {
          document.getElementById('parent').innerHTML= xhr.responseText;
        }
    }  

  postvars = somestuff;
  xhr.open("POST", "req.py", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.overrideMimeType("application/text");
  xhr.send(postvars);
  }



function f2(val)  {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {                
      if (xhr.status == 200 && xhr.status < 300)  
        console.log(xhr.responseText);
        console.log(document.getElementById('newdiv'));
        if (document.getElementById('newdiv') !== null) {
          document.getElementById('newdiv').innerHTML= xhr.responseText;
        }
    }    

  }
  postvars = val;
  xhr.open("POST", "req.py", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.overrideMimeType("application/text");
  xhr.send(postvars);
  }}
</script>

f1的xhr.responseText将类似于

<div id="newdiv"></div>

f2的xhr.responseText就像

fancy text

Answer 1

删除！= null条件，因此每个请求都会显示新数据

Javascript：更新已由XMLHttpRequest

1 个答案: