Generé una matriz/lista de 9 elementos repetidos para agregar a un elemento principal. Cuando agrego la lista a través de la sintaxis extendida, la agrega como una sola cadena. Cuando uso la sintaxis extendida sin corchetes, se agrega solo como un elemento único (correctamente), así escomo también se muestra en la documentación .
append(...nodesOrDOMStrings)A continuación puedes ver lo que tengo hasta ahora:
const boardContainer = document.querySelector('#gbContainer'); const boardSquareChild = document.createElement('div'); boardSquareChild.className = "board-square"; boardSquareChild.id = "boardSquare"; boardSqArray = Array(9).fill(boardSquareChild, 0, 9) boardContainer.append([...boardSqArray])¿Alguna pista de por qué los corchetes lo convierten en una sola cadena y sin los corchetes el elemento se agrega singularmente? No puedo encontrar nada en la documentación sobre por qué (al menos no a través de Mozilla), tampoco parece ser un comportamiento lógico.
Tengo una solución alternativa, pero no responde la pregunta sobre la sintaxis extendida:
for (i = 0; i < boardSqArray.length; i++) { let clone = boardSqArray[i].cloneNode(); boardContainer.append(clone) }El operador de propagación está funcionando perfectamente bien.
El problema que tiene es que está creando una matriz llena con una referencia al mismo elemento exacto. No está haciendo una matriz con todos los elementos nuevos. Entonces, usará map o array from y creará un nuevo elemento en cada índice.
const makeCell = () => { const boardSquareChild = document.createElement('div'); boardSquareChild.className = "board-square"; return boardSquareChild; } const cells = Array.from({ length: 9 }, makeCell); document.querySelector("#out").append(...cells); .board-square { width: 10px; height: 10px; border: 1px solid black; margin: 1px; } <div id="out"></div> const makeCell = () => { const boardSquareChild = document.createElement('div'); boardSquareChild.className = "board-square"; return boardSquareChild; } const cells = Array(9).fill(0).map(makeCell); document.querySelector("#out").append(...cells); .board-square { width: 10px; height: 10px; border: 1px solid black; margin: 1px; } <div id="out"></div>