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

user_15531154 0
Viewed 85

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);
  });
jquery ajax javascript
2 Answers

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);
}
user_170554030

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.

user_155311540
Related