Frontend, I don't understand if querySelector has been found

I'm writing the front,ajax response js. The final code comes, which must be inserted on the page Like after const div = document.querySelector('.row_wow_fadeIn>#xxx1'); the code doesn't work. js

function ajaxSend(url, params) {
    // Отправляем запрос
    fetch(`${url}?${params}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    })
        .then(response => response.json())
        .then(json => render(json))
        .catch(error => console.error(error))
}

const forms = document.querySelector('form[name=filter]');

forms.addEventListener('submit', function (e) {
    // Получаем данные из формы
    e.preventDefault();
    let url = this.action;
    let params = new URLSearchParams(new FormData(this)).toString();
    ajaxSend(url, params);
});

function render(data) {
    // Рендер шаблона
    let template = Hogan.compile(html);
    let output = template.render(data);

    const div = document.querySelector('.row_wow_fadeIn>#xxx1');
    div.innerHTML = output;
}
let html = '\
{{#twister}}\
        <div>\
            <img class="X" src="{{ image }}" class="img-fluid">{{ title }}\
                <p class="text-dark">{{ price }} ₽</p>\
            </div>\
        </div>\
{{/twister}}'

Html:

 <!--Grid row-->
      <div class="row_wow_fadeIn row d-flex justify-content-center wow fadeIn col-md-12">
          <!--Grid column-->
          <div class="col-lg-3 col-md-6 mb-4">
          <div>
            <div id="xxx1" class="XXX">
              {% for twister in case_list %}
                <img class="X" src="{{ skin.image.url }}" class="img-fluid">{{ skin.title }}
                    <p class="text-dark">{{ skin.price }} ₽</p>
              {% endfor %}
            </div><input type="button" onclick="LetsGo()" value="!!!Исчо!!!">
          </div>

          </div>
          <!--Grid column-->
        </div>

Вернуться на верх