Как получить элементы после динамического рендера в базовом js?

Question

У меня успешно генерируются html-данные на основе json базы данных. Код для генерации использовался такой:

const renderGoods = (goods) => {
    // console.log("renderGoods")
    const goodWrapper = document.querySelector('.goods')
    console.log(goodWrapper)
    goodWrapper.innerHTML = '';
    goods.forEach((goodsItem) => {
        goodWrapper.insertAdjacentHTML('beforeend', `
        <div class="card">
            ${goodsItem.sale ? '<div class="card-sale">?Hot Sale?</div>':''}
            <div class="card-img-wrapper">
                <span class="card-img-top"
                        style="background-image: url('${goodsItem.img}')">
                </span>
            </div>
            <div class="card-body justify-content-between">
                <div class="card-price">${goodsItem.price} ₽</div>
                    <h5 class="card-title">${goodsItem.title}</h5>
                        <button class="btn btn-primary">В корзину</button>
                </div>
            </div>
    
        `)

    });
}
export default renderGoods

Я пытаюсь обратиться к элементу (button class="btn btn-primary")Однако прямое обращение вида document.querySelector(".btn btn-primary") возвращает пустое значение. Обращение goods.children - выводит все необходимые card-ы, однако в случае обращения childNodes - элементы становятся недоступны. Перебором удалось определить, что весь html-код записан в goods.childNodes[3]. Как можно получить приведенную кнопку во всех отрендеренных card-ах?

Answer 1

Однако прямое обращение вида document.querySelector(".btn btn-primary") возвращает пустое значение.

Корректное использование:

document.querySelector('.btn.btn-primary');

Как можно получить приведенную кнопку во всех отрендеренных card-ах?

Сначала селектором достаньте все card, и затем снова селектором их кнопки. Либо можете сразу кнопки достать, добавьте им какой-то общий класс и выцепите.

const cards = document.querySelectorAll('.card');
const buttons = [...cards].map((card) => card.querySelector('.btn'));

const buttons = document.querySelectorAll('.card-btn');

БЛОГ НА HUSL

Как получить элементы после динамического рендера в базовом js?

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