Me preguntaba si hay una forma de agregar elementos generados por innerHtml. No es tan difícil de hacer con createElement pero para mí innerHtml se siente más lógico y fácil. Hice un código de ejemplo para mostrar mi problema:
Crear elemento:
const grid = document.querySelector('.grid') let squares = [] function createGrid() { for (let i=0; i < 100; i++) { const square = document.createElement('div') square.classList.add('square') grid.appendChild(square) squares.push(square) } } function hideSquare(){ let random = Math.floor(Math.random()*100) squares[random].style.display = "none" }HTML interno:
const grid = document.querySelector('.grid') let squares = [] function createGrid() { for (let i=0; i < 100; i++) { grid.innerHtml += `<div class="square"></div>` // ??? } } function hideSquare(){ let random = Math.floor(Math.random()*100) squares[random].style.display = "none" }Puede usar lastChild para obtener el div que acaba de insertar (tenga en cuenta que agregué la id en el código a continuación solo para visualizar el orden), además, es innerHTML no innerHtml :
const grid = document.querySelector('.grid'); let squares = []; function createGrid() { for (let i=0; i < 5; i++) { grid.innerHTML += `<div id="square-${i+1}" class="square"></div>`; squares.push(grid.lastChild); } } createGrid(); console.log(squares); <div class="grid"></div>Aquí está mi enfoque con .innerHTML :
function createGrid(n) { // assign the innerHTML only ONCE: grid.innerHTML = [...Array(n)].map((_, i) => `<div class="square">${i}</div>`).join("\n"); return [...grid.querySelectorAll(".square")] // return all DOM elements in an array } function shfl(a) { // Durstenfeld shuffle for (let j, i = a.length; i > 1;) { j = Math.floor(Math.random() * i--); if (i != j)[a[i], a[j]] = [a[j], a[i]] } return a } const grid = document.querySelector('.grid'); const squares = shfl(createGrid(30)); document.querySelector("button").onclick = () => squares.length && (squares.pop().style.visibility = "hidden"); .square { height: 20px; width: 20px; display: inline-block; background-color: #ddd; margin: 4px; padding: 10px; text-align: right } <button>hide a square</button> <div class="grid"></div> La función hideSquare() original tenía el problema de que un cuadrado oculto podría haber sido elegido nuevamente para ocultarlo, dando al usuario la impresión de que el clic "no funcionó". Al barajar la matriz de todos los cuadrados una vez y luego ocultar los elementos uno tras otro, se evita este problema.