Как сделать, чтобы содержимое div обновлялось, когда приходят новые данные с сервера?

Question

[Alekcey_s]

Проблема в том, что div обновляется, но остаются старые данные. Новые данные с сервера накладываются поверх старых.

var getUserState = () => {
var xhr = new XMLHttpRequest();
var url = localStorage.getItem('REQUEST_URL').replace(/"/g, '') + "/api/pickpoint/goods";

xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", ["application/json", "text/plain", "*/*"]);
xhr.setRequestHeader("x-token", localStorage.getItem('_wb-ext-user-token').replace(/"/g, ''));

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);

    if (json.data) {
      var myState = document.createElement('div')
      myState.innerHTML = '<div class="kolvo">' + json.total +'</div>';
      document.body.append(myState);
     myState.innerHtml ="newContent";
      console.log(myState);
      
    }
  }
};
xhr.send();
}
 setTimeout(() => {    
        getUserState ();
  },
  setInterval(() => {
        getUserState ();
      }, 100000);
  	}

Comments

[Алексей Илларионов]

У вас каждый раз при успешном колбэке создаётся див. Вам нужно заранее заверстать этот див, сохранить его в переменную и в колбеке просто менять его innerHTML

const myState = document.querySelector(".myState") // надо, чтобы этот div уже существовал в DOM, заверстайте его предварительно

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);

    if (json.data) {
      myState.innerHTML = '<div class="kolvo">' + json.total +'</div>';
    }
  }
};

Answer 1

[Владимир Коротенко]

где то вставить следующий код
немного проапгрейдил, убрал лишнюю верстку, и внешний див тоже можно убрать

<div>
<div id="kolvo_id" class="kolvo">
</div>
</div>

переписать кусок кода

if (json.data) {
      var myState = document.getElementById('kolvo_id')
      myState.innerHTML = json.total;
    }

Comments

[Alekcey_s]

Спасибо! Просто это расширение для google chrome . я даже html не делал.

[Владимир Коротенко]

Alekcey_s, хм ну распакуйте его, внесите изменения и перезагрузите браузер. должно заработать