Adding elements generated by innerHtml to array-CodePudding

I was wondering if there is a way to add elements generated by innerHtml. It's not that hard to do with createElement but for me innerHtml feels just more logical and easy. I made a example code to show my problem:

Create element:

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"
}

innerHtml:

const grid = document.querySelector('.grid')
let squares = []


function createGrid() {
    
    for (let i=0; i < 100; i  ) {
    grid.innerHtml  = `<div ></div>`
    // ???
    }
}

function hideSquare(){
let random = Math.floor(Math.random()*100)
squares[random].style.display = "none"
}

CodePudding user response：

You can use lastChild to get the div you just inserted (note I added the id in the code below just to visualize the order), also, it is innerHTML not innerHtml:

const grid = document.querySelector('.grid');
let squares = [];

function createGrid() {
    for (let i=0; i < 5; i  ) {
      grid.innerHTML  = `<div id="square-${i 1}" ></div>`;
      squares.push(grid.lastChild);
    }
}

createGrid();

console.log(squares);

<div ></div>

CodePudding user response：

Here is my approach wirh .innerHTML:

function createGrid(n) {
  // assign the innerHTML only ONCE:
  grid.innerHTML = [...Array(n)].map((_, i) => `<div >${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 ></div>

The original hideSquare() function had the problem, that a hidden square could have been chosen again for hiding, giving the user the impression that the click "didn't work". By shuffling the array of all squares once and then hiding the elements one after the other this problem is avoided.