javascript - how to get the inner html of the title

Question

i was trying to link my page to another page without refreshing the page and i did it successfully, but the title of the 2nd page did not change it was still the title of the first page. the 2nd page has its own title tag that contains the title of the page, but it is not reflecting when i redirect it, how can i fix that.

here is my code:

let script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-3.4.1.min.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);

function goto(name_of_page) {

  // go get the page and paste it on the current page
  var request = new XMLHttpRequest();
  request.open("GET", name_of_page, true);
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      let resp = request.responseText;

  let link = name_of_page.split(".");
  let name = link[0];
  $("body").load(`${name_of_page}`);

  if (
    location.href.includes("localhost") ||
    location.href.includes("www")
  ) {
    window.history.pushState(name_of_page, "Title", name);
    console.log("has www or localhost");
  } else {
    window.history.pushState(name_of_page, "Title", name_of_page);
    console.log("does not have www");
  }

}
};
 request.send();

}

Answer 1

You can parse your loaded data to an HTML Content Template, so once you have the data:

/*...*/

let resp = request.responseText;

const tpl = document.createElement('template');
tpl.innerHTML = resp;

document.title = tpl.content.querySelector('title').textContent;

/*...*/