Is There any way to do the same role that the method .load() in jquery does to get part of html page with vanilla Javascript

Question

I'm learning Ajax now and I have a problem finding videos or articles that use just javascript to do things that jquery does. To load apart from an HTML page and put it on the page, using jquery it is just like that:

   $(function () {
      $("#showData").load("pageName.html #whatIWant");
    });

And the Data in #whatIWant will be in element with #showData id. I can't figure how to do the same thing with Vanilla Js thanks for your participation.

NOTE: If I use the method below, I get all the data from the other page and I want to control the response.

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("test.html")
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((reject) => {
    console.error(reject);
  });

Answer 1

You can use the built in XMLHTTPRequest to fetch an HTML document.

function fetchElement(url, selector) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHTTPRequest();
    xhr.onload = function() {
      if (!this.responseXML || !this.responseXML.querySelector) reject("No HTML Document found");
      else resolve(this.responseXML.querySelector(selector));
    }
    xhr.open('GET', url);
    xhr.responseType = 'document';
    xhr.send();
  });
}

const myElement = await fetchElement("pageName.html", "#whatIWant");
document.querySelector("#showData").innerHTML = "";
document.querySelector("#showData").appendChild(myElement);

---

Alternatively, you can also use the Fetch API to fetch the web page, along with the DOMParser to parse it.

async function fetchElement(url, selector) {
    const data = await fetch(url).then(res => res.text());
    const parsed = new DOMParser().parseFromString(data, 'text/html');
    return parsed.querySelector(selector);
}

Answer 2

There is another way that I found when seeking answers.

let dom = new DOMParser();

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("test.html")
  .then((resolve) => {
    let pageHtml = dom.parseFromString(resolve, "text/html");
    let element = pageHtml.querySelector("whatIWant");
    console.log(element);
  })
  .catch((reject) => {
    console.error(reject);
  });

This Answers and the other one up are both works for me, I hope these answers help someone.