find a specific html element in (html)string coming from server without appending it to the dom

Question

I try to analyse a string that I fetch from server, to ensure the content is what I expect.

My goal:

load html from my ad-service backend
ensure it is an ad and not for example some error page
display the content in an iframe if the test was successfull

I already found stackoverflow answers (see in code below) but I fail.

My test html

<!DOCTYPE html>
<html lang="en">
    <head><title>Test ad</title></head>
    <body>
        <img id="promo_news" src="test-ad-pic0.png" alt="Test ad">
    </body>
</html>

My code to test the retrieved html:

function isLoadedHtmlAnAd(loadedHtmlCode) {

    // trim is necessary to get rid of a jquery error when checking the string 
    // in isLoadedHtmlAnAd(see: https://stackoverflow.com/a/23061815)
    loadedHtmlCode= loadedHtmlCode.trim(); 


    // inspired by https://stackoverflow.com/a/15403888
    let tempDom = $.parseHTML(loadedHtmlCode);
    let markerElement = $('#promo_news', tempDom);

    if(markerElement.length > 0) {
        return true;
    } else {

        // inspired by https://stackoverflow.com/a/28726480
        tempDom = $(loadedHtmlCode);
        let markerElement = tempDom.find('#promo_news');
        if(markerElement.length > 0) {
            return true;
        }
    }
    return false;
}

The problem is that the markerElement is not found.

I can see that the loaded html is the right one and includes the img tag with the id #promo_news

Any idea what I do wrong? I'm also open to other ideas how to detect if the html is an ad.

Thanks!

The stackoverflow answers metioned in my code to click through

The full html is included above. Anyway, I found the problem. Thanks for trying to help!! — andymel, Aug 08 '22 at 17:19

score 0 · Answer 1 · answered Aug 08 '22 at 17:17

I missed the solution in one of the linked answers.

I wrote

let tempDom = $.parseHTML(loadedHtmlCode);
let markerElement = $('#promo_news', tempDom);

This works

let tempDom = $('<output>').append($.parseHTML(loadedHtmlCode));
let markerElement = $('#promo_news', tempDom);

See https://stackoverflow.com/a/15403888

find a specific html element in (html)string coming from server without appending it to the dom

1 Answers1