Как найти динамически созданные элементы на странице?

Question

[Andrew E]

Создаю на странице карточки подобным образом, из json файла:

const getOutputCard = (data) => {
				cardGrid.innerHTML = data.map(el =>
					`
					<div class="card">
				           <div class="card__body">
	
				          </div>
			               </div>
					`
				).join('')

И все получается, карточки рендерятся. Захотел сделать кнопку "Показать ещё". Решил пойти по пути самой простой реализации, нарезать массив и выдывать его порциями. НО, я не могу собрать этот массив. Эти карточки просто не находятся. Пусто.

const card = document.querySelectorAll('.card')
	const cardArr = Array.from(card)
	console.log(cardArr) // []

Что я делаю не так?

Попробовал с помощью childNodes, у элемента куда рендерю эти карточки. В хроме в консоль выводит, а в мозиле просто пусто. Там какой-то js другой не пойму?

const grid = document.querySelector('.grid')
		grid.childNodes.forEach(el => {

			if (el.nodeName === 'DIV') {
				el.classList.add('active')
				console.log(el)
			}

		})

Comments

[n1ksON]

const card = document.querySelectorAll('.card') это не работает, потому что вы наверняка вызываете это просто в начальный момент загрузки страницы, когда туда еще ничего не добавлено и массив пустой

в консоли хрома работает, потому что вы ищите карточки не в начальный момент времени, а когда они уже добавлены. следовательно нарезать массив с кнопкой "показать еще" лучше не в момент, когда уже все карточки были добавлены в DOM, а потом скрыты. нарезайте их еще в момент перед добавления в DOM и далее добавляйте постепенно по клику на кнопку

[Andrew E]

n1ksON, const grid = document.querySelector('.grid') это вызов элемента, куда эти карточки рендерятся. Во втором примере я показал, как пытался найти элементы через поиск дочерних.

Ок, в консоли хрома отображаются, почему не отображаются в мозиле?

нарезайте их еще в момент перед добавления в DOM и далее добавляйте постепенно по клику на кнопку

Не очень хочется, это же будет вызывать перезагрузку всей страницы или нет?

Хочется пойти по пути простому, карточек будет немного, всего штук 20, поэтому проще загрузить все карточки и с ними работать. Вопрос КАК к этим карточкам обратится?

В хроме почти все решения работают, в мозиле ничерта не работает. Задолбала уже

[n1ksON]

так в чем проблема?
у вас есть document.querySelector('.grid')
у вас есть метод append
у вас есть кнопка "показать еще"

вешаете событие на кнопку и добавляете через append (или innerHTML +=) нужные карточки

[Aetae]

.innerHTML += ...; - никогда так не делайте. Это перезапись всего, а не добавление нового.
Если очень хочется допихивать именно html, a не dom - есть специальный метод:
.insertAdjacentHTML('beforeend', ...);