How to access an element from an external HTML document?

Question

I'm trying to build a small project where I create a new HTML document (which would be an individual page of an e-commerce product) and another document takes the information from that created document. However, I have no idea how to extract information from an external document without having to embed the entire page with <iframe>.

If I use document.querySelector() or any other similar function I can get a reference from the elements that have id and class. However, this function will get the element from the HTML document that is in the JS code I'm working on.

To exemplify my problem let's support that I have <div id="p1"></div> inside the products.html document to work with the #p1 element I would have to do this: let p1 = document.querySelector("#p1").

But what if I have an index.html document and I want to use the <div id="p1"></div> element of products.html how would I do that?

kess · Accepted Answer · 2022-06-12 16:22:00Z

1

You can fetch the html file as text, parse it, and run the querySelector

fetch("products.html").then(r=>r.text()).then((html)=>{ // get the content of products.html
  let element = document.createElement("html");
  element.innerHTML = html; // parse the html
  let p1 = element.querySelector("#p1");
});

Keep in mind that both documents have to be on the same origin (see: CORS), so you cannot use this for scraping third party websites

answered Jun 12, 2022 at 16:22

kess

1,3299 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

leensc Over a year ago

When I capture #p1 to add #p1 inside another element which function would I use?

leensc Over a year ago

Thank you for your help. I managed to increment this function with your code and it worked super well: horadecodar.com.br/2021/07/24/…

Hicham Zakroum · Accepted Answer · 2022-06-12 15:54:58Z

1

use one js file and call it in both products.html and index.html

answered Jun 12, 2022 at 15:54

Hicham Zakroum

1041 silver badge10 bronze badges

2 Comments

leensc Over a year ago

So as I said, the JS will be related to the document being used. I want to do in index.html something like products.html#querySelector("#p1")

Hicham Zakroum Over a year ago

You can see this answers link

Collectives™ on Stack Overflow

How to access an element from an external HTML document?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related