I am using JavaScript to fetch a document via ajax, but what I would like to do is filter the retrieved content by ID, in this example "#container".
In jQuery it can be done like this:
lightbox.load( "test.html #container" );
My JavaScript looks like this:
let response = fetch("test.html").then(function(response) {
if (response.ok) {
response.text().then(function(text) {
lightbox.innerHTML = text;
});
}
});
The above is putting the entire text response into the lightbox object. I am not sure how to filter the response by the #container ID.
You can create a new HTML element from the receiving HTML and then search for your container.
let response = fetch("test.html").then(function(response) {
if (response.ok) {
response.text().then(function(text) {
const template = document.createElement('template');
template.innerHTML = text;
const lightBoxContent = template.content.querySelector('#container');
lightbox.innerHTML = lightBoxContent.innerHTML;
});
}
});
Inspiration by: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype