Question

在过去一小时左右，我一直在尝试解决一个问题，当我尝试从XMLHttpRequest更改元素的html时出现了这个问题。

xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(document.getElementById('notifications-navbar').innerHTML);
    document.getElementById('notifications-navbar').innerHTML = xhr.responseText;
    console.log(xhr.responseText);
    console.log(document.getElementById('notifications-navbar').innerHTML);
  } else {
    console.log('error');
  }
};

xhr.send();

控制台日志的输出是： pastebin

所以在console.log中我们可以看到对innerHTML的更改，但是当我通过Chrome检查查看元素时没有任何变化，浏览器也没有变化。我甚至试图删除所有正在加载的JS脚本，只是在XHLHttpRequest之外对innerHTML进行简单的更改，但这也没有帮助。如果你能提供帮助，我会非常高兴。

Answer 1

不确定你的EndPoint网址是什么，但我为你写了这个并且它工作得很好。希望这可以帮到你！

<强> HTML

<div id = "notifications-navbar"></div>

<强>的Javascript

    var xhr;

    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var url = "http://jsonplaceholder.typicode.com/posts";
    xhr.open('GET', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.onload = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(document.getElementById('notifications-navbar').innerHTML);
            document.getElementById('notifications-navbar').innerHTML = xhr.responseText;
            console.log(xhr.responseText);
            console.log(document.getElementById('notifications-navbar').innerHTML);
        } else {
            console.log('error');
        }
    };

    xhr.send();

Answer 2

好的，抱歉伙计们，我发现了我的错误，我在我的HTML中有两个带有ID通知的元素 - navbar，只有第一个被更改。无论如何，谢谢你的帮助。

通过element.innerHTML ='text'更改html时，它不起作用

2 个答案: