Javascript fetch to filter by ID of fetched content

Question

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.

JBS · Answer 1 · 2022-06-29T17:18:11.717

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

Javascript fetch to filter by ID of fetched content

1 Answers1