Creating DIVs from XML content with Css

Before I start I should note that I found a similar post at dynamically creating HTML divs with JS from XML

But it is missing some key elements such as The 'GET' method to get the file mentioned.Plus I want to try to achieve this completely with JavaScript. so here it goes:

I want my javascript to load content from an XML document. I've worked with editing JavaScript and other coding languages many time but nothing to this extent. So my XML form is this :

  <?xml version="1.0"?><messages>
     <message>
<image>note1.jpg</image>
        <text>Hello, This is the first message.</text>
<note>Notes for the first message</note>
      </message>
    <message>
<image>note2.png</image>
        <text>Now,this is a second message</text>
<note>Notes for the second message</note>
      </message>
    </messages>

My JavaScript is:

let page = 1;
const last_page = 10;
const pixel_offset = 200;
const throttle = (callBack, delay) => {
  let withinInterval;
  return function () {
    const args = arguments;
    const context = this;
    if (!withinInterval) {
      callBack.call(context, args);
      withinInterval = true;
      setTimeout(() => withinInterval = false, delay);
    }
  };
};

const httpRequestWrapper = (method, URL) => {
  return new Promise((resolve, reject) => {
    const xhr_obj = new XMLHttpRequest();
    xhr_obj.responseType = "json";
    xhr_obj.open(method, URL);
    xhr_obj.onload = () => {
      const data = xhr_obj.response;
      resolve(data);
    };
    xhr_obj.onerror = () => {
      reject("failed");
    };
    xhr_obj.send();
  });
};

const getData = async (page_no = 1) => {
  const data = await httpRequestWrapper(
  "GET",
  `myXML.xml`);


  const { results } = data;
  populateUI(results);
};

let handleLoad;

let trottleHandler = () => {throttle(handleLoad.call(this), 1000);};

document.addEventListener("DOMContentLoaded", () => {
  getData(1);
  window.addEventListener("scroll", trottleHandler);
});

handleLoad = () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - pixel_offset) {
    page = page + 1;
    if (page <= last_page) {
      window.removeEventListener('scroll', trottleHandler);
      getData(page).
      then(res => {
        window.addEventListener('scroll', trottleHandler);
      });
    }
  }
};







const populateUI = data => {
  const container = document.querySelector('.whole_wrapper');
  data &&
  data.length &&
  data.
  map((each, index) => {
    const {  photoVar } = image;
    const { textVar } = text;
    const { noteVar } = note;
    container.innerHTML +=
    `
    <div class="each_bubble">
      <div class="imageContainer">
        <img src="${photoVar}" alt="" />
      </div>
      <div class="right_contents_container">
        <div class="text_field">${textVar}</div>
        <div class="note_field">${noteVar}</div>
      </div>
    </div>
    
    `;
  });

};

My HTML simply loads the JavaScript and CSS into the page.

Each DIV should have its own photo, text and note. I'm pretty sure I can do the CSS part once I can get this to completely load.