Не находится элемент на странице

<style>
    span {
        display: block;
    }
</style>
 
<button id='add'>Добавить</button>
<button id='test'>Тест</button>
<p></p>
 
<script>
const ot = document.querySelector('p')
add.addEventListener('click', _ => {
    const o = document.createElement('span')
    o.textContent = (new Date).toISOString()
    ot.insertAdjacentElement('beforeend', o)
})
test.addEventListener('click', _ => {
    const v = ot.querySelectorAll('span').length
    alert(`Элементов ${v}шт.`)
})
</script>

<button id='test'>Тест</button>
<button id='add'>Добавить элементы</button>
<div class="styled__SelectStyled-sc-15n6gx6-0 HHVbn uikit-select">
    <div class="styled__SelectInputBox-sc-15n6gx6-1 csquon uikit-select_box">
        <div class="styled__SelectInputValue-sc-15n6gx6-4 htsPlN">
            <span class="styled__SelectInputSearch-sc-15n6gx6-2 bOjFHH">
                <input autocomplete="off" readonly="" placeholder="Выберите шаблон" class="styled__SelectInput-sc-15n6gx6-5 onyxk" value="">
            </span>
            <span title="" class="styled__SelectInputItem-sc-15n6gx6-3 RkdSN uikit-select-inputItem"></span>
        </div>
        <div class="styled__ControlIconStyled-sc-r7tvgm-0 icGPJJ uikit-flatList_control-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>
        </div>
    </div>
    <div tabindex="-1" role="list" class="styled__SelectList-sc-15n6gx6-6 fFVLly uikit-select_list"></div>
</div>
 
<script>
 
const html = `
    <div data-label="текст какой-то" data-value="230697" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 kOyKQH select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
    <div data-label="Завтра могу сделать." data-value="102846" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>Завтра могу сделать.</span>
    </div>
    <div data-label="текст какой-то" data-value="15439" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
    <div data-label="текст какой-то" data-value="76256" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
    <div data-label="текст какой-то" data-value="15296" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
    <div data-label="текст какой-то" data-value="230702" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
    <div data-label="текст какой-то" data-value="256641" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
    <div data-label="текст какой-то" data-value="106421" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
        <span>текст какой-то</span>
    </div>
`
const ot = document.querySelector('.styled__SelectList-sc-15n6gx6-6.fFVLly.uikit-select_list')
add.addEventListener('click', _ => {
    ot.innerHTML = html
})
test.addEventListener('click', _ => {
    const v = document.querySelectorAll('span').length
    alert(`Элементов ${v}шт.`)
})
</script>