Как обраться к html элементу, если он создан с помощью js

Как обраться к html элементу (.dropdown__content), если он создан с помощью js, мы никак не нажимает на этот элемент, мы просто должны убрать класс hidden. Заранее спаси

function renderCompletedTasks(card) {
        cardsTrue.innerHTML += `
        <div class="card">
            <div class="card__content">
                <div class="card__group-one">
                    <button class="card__checkbox"><img src="/source/img/check.svg" alt=""></button>
                    <div>
                        <div class="card__title">${card.Title}</div>
                        <div class="card__desc">${card.Desc}</div>
                    </div>
                </div>
                
                <div class="card__group-two">
                    <div>
                        <div class="card__info">${card.Info}</div>
                        <div class="card__date">${card.Date}</div> 
                    </div>
                    <div class="dropdown">
                        <button><img src="/source/img/more.svg" class="card__more" alt=""></button>
                        <div class="dropdown__content hidden">
                            <button class="card__edit"><img src="/source/img/edit.svg" alt="">Редактировать</button>
                            <button class="card__delete" id=${card.id}><img src="/source/img/delete.svg" alt="">Удалить</button>
                        </div>
                    </div> 
                    
                </div>      
            </div>
        </div>
        `;
}

бо!


Ответы (1 шт):

Автор решения: nazarpunk

function renderCompletedTasks(card) {
  const div = document.createElement('div');
  div.innerHTML = `
        <div class="card">
            <div class="card__content">
                <div class="card__group-one">
                    <button class="card__checkbox"><img src="/source/img/check.svg" alt=""></button>
                    <div>
                        <div class="card__title">${card.Title}</div>
                        <div class="card__desc">${card.Desc}</div>
                    </div>
                </div>
                
                <div class="card__group-two">
                    <div>
                        <div class="card__info">${card.Info}</div>
                        <div class="card__date">${card.Date}</div> 
                    </div>
                    <div class="dropdown">
                        <button><img src="/source/img/more.svg" class="card__more" alt=""></button>
                        <div class="dropdown__content hidden">
                            <button class="card__edit"><img src="/source/img/edit.svg" alt="">Редактировать</button>
                            <button class="card__delete" id=${card.id}><img src="/source/img/delete.svg" alt="">Удалить</button>
                        </div>
                    </div> 
                    
                </div>      
            </div>
        </div>
        `;

  div.querySelectorAll('.dropdown__content').forEach(e => e.classList.remove('hidden'));

  cardsTrue.appendChild(div);
}

→ Ссылка