Using querySelector to find if a div exists in a Javascript Callback for Google Custom Search

I'm using the Javascript callback in Google Custom Search to style the web search results. https://developers.google.com/custom-search/docs/more_examples

I need to figure out a way using the Javascript callback to add a locally hosted placeholder image to Web search result items that don't have a thumbnail image, i.e. the image of search results below.

I know that Google Custom Search will eventually index images for all results, but I want to replace missing images with a placeholder as a stopgap until Google indexes the images.

There is a difference in the HTML for results that have an image served from Google and a result that has no image.

This is the results HTML that has a thumbnail

<div class="gsc-table-result">
<div class="gsc-table-cell-thumbnail gsc-thumbnail">
<div class="gs-image-box gs-web-image-box gs-web-image-box-landscape">
<a class="gs-image" href="......">
<img class="gs-image" src="https://encrypted-tbn0.gstatic.com/images?q....." alt="Thumbnail image"></a>
</div>
</div>
<div class="gsc-table-cell-snippet-close">
<div class="gs-title gsc-table-cell-thumbnail gsc-thumbnail-left">

This is the results HTML that does not have a thumbnail:

<div class="gsc-table-result">
<div class="gsc-table-cell-snippet-close">
<div class="gs-title gsc-table-cell-thumbnail gsc-thumbnail-left">

So I want to add this HTML

<div class="gsc-table-cell-thumbnail gsc-thumbnail">
<div class="gs-image-box gs-web-image-box gs-web-image-box-landscape">
<img class="gs-image" src="images.jpg" alt="Thumbnail image">
</div>
</div>

inside <div class="gsc-table-result"> if gsc-table-result does not have the child div .gsc-table-cell-thumbnail

As a mostly working example, this adds the innerHTML for each result, which is what I don't want:

 var SearchResultsRenderedCallback = function() {
    
    let prependdiv = document.getElementsByClassName("gsc-table-result");
        for (let i = 0; i < prependdiv.length && i < 10; i++) {
    
            let newDiv = document.createElement('div');
            newDiv.innerHTML = '<div class="gsc-table-cell-thumbnail gsc-thumbnail"><div class="gs-image-box gs-web-image-box gs-web-image-box-landscape"><img class="gs-image" src="images.jpg" alt="Thumbnail image"></div></div>';
            prependdiv[i].prepend(newDiv);
        }
   
    
    };
    
    window.__gcse || (window.__gcse = {});
    window.__gcse.searchCallbacks = {
      web: {
        rendered: SearchResultsRenderedCallback,
      },
    };

The code below is where I am trying to use querySelector to select for .gsc-table-result .gsc-table-cell-thumbnail and add the innerHTML if the child div doesn't exist, but this doesn't do anything:

var SearchResultsRenderedCallback = function() {

let prependdiv = document.getElementsByClassName("gsc-table-result");
    for (let i = 0; i < prependdiv.length && i < 10; i++) {

if (document.querySelector('.gsc-table-result .gsc-table-cell-thumbnail ') == null) {

        let newDiv = document.createElement('div');
        newDiv.innerHTML = '<div class="gsc-table-cell-thumbnail gsc-thumbnail"><div class="gs-image-box gs-web-image-box gs-web-image-box-landscape"><img class="gs-image" src="images.jpg" alt="Thumbnail image"></div></div>';
        prependdiv[i].prepend(newDiv);
    }

}

};

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: SearchResultsRenderedCallback,
  },
};

You are searching the whole document for the first '.gsc-table-result .gsc-table-cell-thumbnail ' and always finding one.

You need to limit your query to just the prependdiv.

You also need to look for .gsc-thumbnail instead of .gsc-table-cell-thumbnail

So your if statement becomes:

if (prependdiv[i].querySelector('.gsc-thumbnail') == null) {